发现问题
通过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打包后的模板项目源码放这儿了。