Electron-builder 打包配置项目中文名称和自动运行

网上翻阅后发现有人直接在 package.json 中这样添加 build：

"scripts": {
    // ...
  },
  "build": {
    "productName": "xxx",
    "appId": "xxx",
    // ...
   },

这其实是个大坑，我尝试后发现会报错无效配置：

InvalidConfigurationError: 'build' in the application package.json

后面又查了下，大概是版本原因，electron-builder 某个版本之后的配置得写在 vue.config.js 中才能生效。但网上好多文章都是直接在 package.json 里面配置，还有在 electron 生成的 background.js 里配置的。

解决办法

eletron 打包总会出现莫名其妙的问题，图标缺失、路径错误。其实大多数的坑都是国内网络环境和自己的项目配置问题，这里就配置做一 下说明。需要在 vue.config.js 中对 electron-builder 进行配置（没 vue.config.js 的自己建一个就 ok 了)，具体配 置如下：

module.exports = {
  //判断开发模式还是生产模式
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  //插件配置
  pluginOptions: {
    //electronBuilder 配置
    electronBuilder: {
      builderOptions: {
        'productName': 'all electron',//生成 exe 的名字
        "appId": "com.xi.www",//包名  
        "copyright": "xi",//版权信息
        "directories": { // 输出文件夹
          "output": "electron_output",
        },
        "nsis": {
          "oneClick": false, // 是否一键安装
          "allowElevation": true, // 允许请求提升。若为 false，则用户必须使用提升的权限重新启动安装程序。
          "allowToChangeInstallationDirectory": true, //是否允许修改安装目录
          "installerIcon": "./build/icons/icon.ico",// 安装时图标
          "uninstallerIcon": "./build/icons/icon.ico",//卸载时图标
          "installerHeaderIcon": "./build/icons/icon.ico", // 安装时头部图标
          "createDesktopShortcut": true, // 是否创建桌面图标
          "createStartMenuShortcut": true,// 是否创建开始菜单图标
          "shortcutName": "all-electron", // 快捷方式名称
          "runAfterFinish": false,//是否安装完成后运行
        },
        "win": {
          "icon": "build/icons/icon.ico",//图标路径
          "target": [
            {
              "target": "nsis", //利用 nsis 制作安装程序
              "arch": [
                "x64", //64 位
                // "ia32" //32 位
              ]
            }
          ]
        }
      }
    }
  }
}

其中值得注意的是：

1、directories 输出文件不做修改则默输出在 dist_electron 下。
2、productName 修改的名字允许为汉字。
3、所有路径均是相对与项目的根路径。
4、icon.ico 图标可通过这篇文章的 electron-icon-builder 生成