Electron实战——Electron8+Vue2搭建工程

准备

• yarn

npm install -g yarn
yarn --version

# 设置淘宝镜像
yarn config set registry https://registry.npm.taobao.org 
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/
yarn config list

• VueCli4

npm install -g @vue/cli
vue --version

创建Vue工程

vue create <project_name>

集成Electron

添加electron-builder插件

cd <project_name>

vue add electron-builder

• 选择Electon版本，此处选择6版本，添加完插件后再修改为8版本

  
  

• 添加成功

  
  

修改package.json

安装

yarn install

运行

yarn electron:serve

构建

yarn electron:build

• 构建需要下载一些依赖，如果下载的很慢，则复制URL，使用下载软件下载依赖。下载完成后拷贝到缓存目录中，解压到当前目录
  • mac缓存目录：/Users/xxx/Library/Caches/electron-builder
  • windows缓存目录：C:\Users\xxx\AppData\Local\electron-builder\cache
    
    

• 构建完成

  
  
  
• 构建参数，electron-builder cli

yarn electron:build --mac
yarn electron:build --mac --win

• 安装包配置，electron-builder configuration
  • vue.config.js

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        appId: 'com.electron.demo',
        // 程序名
        productName: 'ElectronDemo',
        // 安装包名
        artifactName: '${name}-${version}.${ext}',
        win: {
          icon: './public/icon.ico',
          target: 'nsis'
        },
        nsis: {
          // 是否一键安装
          oneClick: false,
          // 允许权限提升
          allowElevation: true,
          // 每个用户安装
          perMachine: true,
          // 允许用户更改安装目录
          allowToChangeInstallationDirectory: true,
          // 创建桌面快捷方式
          createDesktopShortcut: true,
          // 创建开始菜单快捷方式
          createStartMenuShortcut: true
        },
        mac: {
          icon: './public/icon.icns',
          target: 'dmg'
        }
      }
    }
  }
}