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, 打包，有点慢，根目录下生成如图文件

最后

以上就是每日一库为你收集整理的vue@cli 项目打包electron的全部内容，希望文章能够帮你解决vue@cli 项目打包electron所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。