electron-builder打包配置说明

发现问题

通过vue建立的项目使用electron-builder打包(不会eletron打包vue项目的看这里)出exe后发现名字就直接是项目文件夹的名字，但此时想自定义汉字名称，通过尝试直接修改package.json中的name后发现此法仅限于修改为英文名称，汉字会报错无法打包。

踩坑过程

在网上翻阅后发现有人直接在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生成

项目源码

为了避免自己踩坑，也为了方便后来者，这里我将vue使用electron-builder打包后的模板项目源码放这儿了。