1. 创建vue项目

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

      2. "electron:build": "vue-cli-service --mode elec electron:build",
      3. "electron:serve": "vue-cli-service --mode elec electron:serve",
      4. "postinstall": "electron-builder install-app-deps",
      5. "postuninstall": "electron-builder install-app-deps",

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

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

    image.png

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

      1. // 主进程中 
      2. function createWindow() {     
      3. ...   
      4.  // 在开发环境和生产环境均可通过快捷键打开devTools
      5. globalShortcut.register('CommandOrControl+Shift+i', function () {
      6.  win.webContents.openDevTools()
      7. })
      9. ... 
      10. }

      image.png
      6.打包

    • 打包时由于 网络问题，下载 winCodeSign和nsis会报错，根据报错的信息拿到 链接 手动去下载，然后解压后 放入 特定的位置，如图image.pngimage.png
    • 打包时，项目目录中如果存在 中文，会报错。。。
    • 设置 打包的参数，均vue.config.js中设置 
      1. ...  
      2. pluginOptions: {
      3.   electronBuilder: {
      4.     builderOptions: {
      5.         "appId": "com.example.app",
      6.         "productName":"aDemo",//项目名，也是生成的安装文件名，即aDemo.exe
      7.         "copyright":"Copyright © 2019",//版权信息
      8.         "directories":{
      9.             "output":"./builds"//输出文件路径
      10.         },
      11.         "win":{//win相关配置
      12.             "icon":"./electron.ico",//图标，当前图标在根目录下，注意这里有两个坑
      13.             "target": [
      14.                 {
      15.                     "target": "nsis",//利用nsis制作安装程序
      16.                     "arch": [
      17.                         "x64",//64位
      18.                         "ia32"//32位
      19.                     ]
      20.                 }
      21.             ]
      22.         }
      23.       }
      24.     }
      25. },
      26.   ...
    • npm run electron:build, 打包，有点慢，根目录下生成如图文件

    image.pngimage.pngimage.png