發現問題
通過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打包后的模板專案原始碼放這兒了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/500135.html
標籤：其他
下一篇：three.js實作太陽系