vue@cli 项目打包electron

vue@cli4

1. 创建vue项目

2. vue add electron-builder, 添加 electron打包插件，此时 根目录下，多了background.js文件，package.json 多了四个 指令

    "electron:build": "vue-cli-service --mode elec electron:build",
    "electron:serve": "vue-cli-service --mode elec electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps",

3.package.json 中 main: bakcground.js,background.js为主进程

4. 开发：npm run electron:serve, 编译完之后，自动启动 electron，如下图

5. 添加 打开 开发工具 快捷键

主进程中
function createWindow() {
    ...
  globalShortcut.register('CommandOrControl+Shift+i', function () {
    win.webContents.openDevTools()
  })
...
}
  

6.打包

• 打包时由于 网络问题，下载 winCodeSign和nsis会报错，根据报错的信息拿到 链接 手动去下载，然后解压后 放入 特定的位置，如图
• 打包时，项目目录中如果存在 中文，会报错。。。
• 设置 打包的参数，均vue.config.js中设置

  ...
  lintOnSave: false,
  pluginOptions: {
      electronBuilder: {
        builderOptions: {
            "appId": "com.example.app",
            "productName":"aDemo",//项目名，也是生成的安装文件名，即aDemo.exe
            "copyright":"Copyright © 2019",//版权信息
            "directories":{
                "output":"./builds"//输出文件路径
            },
            "win":{//win相关配置
                "icon":"./electron.ico",//图标，当前图标在根目录下，注意这里有两个坑
                "target": [
                    {
                        "target": "nsis",//利用nsis制作安装程序
                        "arch": [
                            "x64",//64位
                            "ia32"//32位
                        ]
                    }
                ]
            }
          }
        }
    },
  ...

• npm run electron:build, 打包，有点慢，根目录下生成如图文件