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打包后的模板项目源码放这儿了。