復制代碼
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
pluginOptions: {
electronBuilder: {
builderOptions: {
'appId': 'wyDemo.com',
'productName': 'wyDemo', // 項目名，也是生成的安裝文件名，即wyDemo.exe
'copyright': 'ddx Copyright © 2020', // 版權信息
'files': [
'./**/*'
],
'extraFiles': [ // 把指定的資源復制到程序根目錄，即把server文件夾的內容復制到程序根目錄，這里server文件夾下的內容相當於我的后台，我在background.js中有相應的處理。
'./server'
],
'directories': {
'output': './dists' // 輸出文件路徑
},
'win': { // win相關配置
'icon': './favicon.ico', // 圖標，當前圖標在根目錄下，注意這里有兩個坑
"requestedExecutionLevel": "requireAdministrator", //獲取管理員權限
'target': [{
'target': 'nsis', // 利用nsis制作安裝程序
'arch': [
'x64', // 64位
'ia32'
]
}]
},
'nsis': {
'oneClick': false, // 是否一鍵安裝
'allowElevation': true, // 允許請求提升。 如果為false，則用戶必須使用提升的權限重新啟動安裝程序。
'allowToChangeInstallationDirectory': true, // 允許修改安裝目錄
'installerIcon': './favicon.ico', // 安裝圖標
'uninstallerIcon': './favicon.ico', // 卸載圖標
'installerHeaderIcon': './favicon.ico', // 安裝時頭部圖標
'createDesktopShortcut': true, // 創建桌面圖標
'createStartMenuShortcut': true, // 創建開始菜單圖標
'shortcutName': 'wyDemo' // 圖標名稱(項目名稱)
}
}
}
}
}
"build": {
"productName":"xxxx",//項目名 這也是生成的exe文件的前綴名
"appId": "com.leon.xxxxx",//包名
"copyright":"xxxx",//版權 信息
"directories": { // 輸出文件夾
"output": "build" }, "nsis": { "oneClick": false, // 是否一鍵安裝 "allowElevation": true, // 允許請求提升。 如果為false，則用戶必須使用提升的權限重新啟動安裝程序。 "allowToChangeInstallationDirectory": true, // 允許修改安裝目錄 "installerIcon": "./build/icons/aaa.ico",// 安裝圖標 "uninstallerIcon": "./build/icons/bbb.ico",//卸載圖標 "installerHeaderIcon": "./build/icons/aaa.ico", // 安裝時頭部圖標 "createDesktopShortcut": true, // 創建桌面圖標 "createStartMenuShortcut": true,// 創建開始菜單圖標 "shortcutName": "xxxx", // 圖標名稱 "include": "build/script/installer.nsh", // 包含的自定義nsis腳本 }, "publish": [ { "provider": "generic", // 服務器提供商 也可以是GitHub等等 "url": "http://xxxxx/" // 服務器地址 } ], "files": [ "dist/electron/**/*" ], "dmg": { "contents": [ { "x": 410, "y": 150, "type": "link", "path": "/Applications" }, { "x": 130, "y": 150, "type": "file" } ] }, "mac": { "icon": "build/icons/icon.icns" }, "win": { "icon": "build/icons/aims.ico", "target": [ { "target": "nsis", "arch": [ "ia32" ] } ] }, "linux": { "icon": "build/icons" } }
復制代碼
1、路徑中不要有中文
2、NPM下載的問題
因為NPM在國內比較慢。導致electron-V.xxxx.zip下載失敗。這些東西如果是第一次打包的話是需要下載對應electron版本的支持文件。解決辦法有兩個
（1）設置鏡像：在build里面加下面一段代碼
"electronDownload": { "mirror": "https://npm.taobao.org/mirrors/electron/" }
（2）直接下載后放入C盤（采用的這種）
直接去淘寶鏡像文件庫找到對應的文件並下載，放到指定的目錄下，electron的淘寶鏡像地址：https://npm.taobao.org/mirrors/electron/。下載完之后放到指定的文件。一般文件的地址在C:\Users\Administrator\AppData\Local\electron\Cache。例如我要下載8.2.3版本的electron，那么找到鏡像下得文件然后放到指定文件夾中。
（3）NSIS下載問題
如果你要打NSIS的包還需要再下載nsis-resources-xxx等等包。通過錯誤日志我們可以得到我們要下載得版本，一般錯誤中通常會展示github下載地址，直接點開連接去下載。但是位置這次不一樣了。因為這是electron-builder的支持環境所以我們要放在C:\Users\Administrator\AppData\Local\electron-builder\cache\nsis\下了。
一般情況下解決這些問題的思路就是，缺什么拿什么?。
3、node-sass問題
安裝vs2017必須裝C++模塊，安裝后重新下載node-sass
4、static/下資源無法加載問題
在開發和產品階段static的路徑是不一致的。這里官方提供了一個__static的全局變量 （兩個下划線開頭），可以用來替代需要static的地方
如果dev或者web環境下__static變量解析不正確，只需要自行修改對應運行環境下的__static變量值就行了，例如dev環境下的__static應該改為：
復制代碼 //.electron-vue/webpack.renderer.config.js if (process.env.NODE_ENV !== 'production') { //非最終產品環境,這里即為dev環境 rendererConfig.plugins.push( new webpack.DefinePlugin({ // '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"` '__static': JSON.stringify('./static') }) ) } 復制代碼
參考：https://blog.csdn.net/weixin_43103477/article/details/82259381?utm_source=blogxgwz3
5、打包后顯示調試工具
mainWindow.webContents.openDevTools()