（一）Found ‘electron’ but not as a devDependency, pruning anyway
原因：對electron沒有嚴格要求的話可以忽略，不影響打包，但會影響第三方庫的使用，應使用推薦庫進行打包。
修改 .electron-vue/webpack.renderer.config.js 檔案
// let whiteListedModules = ['vue']
let whiteListedModules = ['vue', 'electron']
（二）Multispinner is not defined
原因：在 electron -vue 的模板中，沒有引入 multispinner 相關的依賴，對 multispinner 依賴重新安裝，並在 build.js 檔案中加入引用。
命令列安裝 multispinner
npm install multispinner -D
在 .electron-vue/build.js 檔案中引入 multispinner
const Multispinner = require('multispinner')
（三）Build:Identifier 'tasks'has already been declared
原因：在 .electron-vue/build.js 中重複申明瞭tasks，導致在打包時報錯，所以需要對其中至少一個tasks 進行重新命名。
修改 .electron-vue/build.js 檔案
// const tasks = ['main', 'renderer']
// const m = new Multispinner(tasks, { ...
const tasks1 = ['main', 'renderer']
const m = new Multispinner(tasks1, { ... // const tasks = new Listr( ...
// await tasks
const tasks2 = new Listr( ...
await tasks2
（四）electron-packager --打包命令的引數設定
"scripts": {
"package": "electron-packager ./ app --all --out ./out --electron-version 2.0.18 --overwrite --icon=./src/renderer/assets/images/icon"
}
/**
*
* electron-packager <sourcedir> <appname> <platform> <architecture> <electron version> <optional options>
*
* 引數說明：
* sourcedir：專案所在路徑
* appname：應用名稱
* platform：確定了你要構建哪個平臺的應用（Windows、Mac 還是 Linux）
* architecture：決定了使用 x86 還是 x64 還是兩個架構都用
* electron version：electron 的版本
* optional options：可選選項
*
**/
打包成功如下：
根據配置在專案根目錄下生成 CloudPrint 資料夾：
（五）自定義 ico 圖示
注意：必須使用軟體處理後生成的 .ico 檔案，不能直接修改後綴名得到 .ico 檔案（因為通過修改其他格式圖片的字尾生成的 .icon 檔案在打包時會報錯！！！）。
（六）打包成功執行桌面應用白屏
修改 .electron-vue/webpack.renderer.config.js 檔案
// nodeModules: process.env.NODE_ENV !== 'production' ? path.resolve(__dirname, '../node_modules') : false
nodeModules: path.resolve(__dirname, '../node_modules')
（七）打包時 resource busy or locked, rmdir 'D:\www\g******\***\***-win32-ia32'
原因：當前打包的專案有正在執行的已打包程式，確定關閉後重新打包 。打包時關閉正在執行的已打包程式。
（八）mac環境的包需要在Mac上進行打包！！！
（九）macOS“自動更新”必須要使用蘋果開發者證書進行簽名！！！
（十）npm run build:web 報錯：can‘t resolve 'fs'
修改 webpack.web.config.js 檔案
// target: 'electron-main'
// target: 'web'
target: 'electron-renderer'
（十一）實現點選工作列圖示顯示/隱藏客戶端
（十二）Linux環境命令列報錯 `node ./postinstall.js`
// 解決方法：將electron下載地址指向taobao映象 npm config set electron_mirror "https://npm.taobao.org/mirrors/electron/" cnpm install
（十三）生產環境下啟用應用程式的開發者工具
// 開啟
mainWindow.webContents.openDevTools() // 分離狀態開啟
mainWindow.webContents.openDevTools({ mode: 'detach' }) // 在視窗左側開啟
mainWindow.webContents.openDevTools({ mode: 'left' }) // 在視窗右側開啟
mainWindow.webContents.openDevTools({ mode: 'right' }) // 在視窗底部開啟
mainWindow.webContents.openDevTools({ mode: 'bottom' })
（十四）主程序對靜態檔案的訪問
如下：主程序設定圖示路徑，需根據開發環境和生成環境的不同而不同。
要求：dev環境下新增icon.png至/src/renderer/assets/images ； pro環境下新增icon.png至/static 。
// main/index.js // 視窗、工作列、托盤等圖示的路徑設定
icon: process.env.NODE_ENV === 'development' ? path.join(__dirname, '../renderer/assets/images/icon.png') : path.join(__static, './icon.png')
日常開發中不會將相同圖片copy兩次放不同位置，可通過build配置拷貝靜態檔案到所需位置。
修改 webpack.renderer.config.js 、webpack.web.config.js 檔案
// .electron-vue/webpack.renderer.config.js 和 .electron-vue/webpack.web.config.js
// if (process.env.NODE_ENV === 'production') {
// ...
//
// rendererConfig.plugins.push(
// ...
//
// new CopyWebpackPlugin([
// {
// from: path.join(__dirname, '../static'),
// to: path.join(__dirname, '../dist/electron/static'),
// ignore: ['.*']
// }
// ])
//
// ...
// )
// }
if (process.env.NODE_ENV === 'production') {
...
rendererConfig.plugins.push(
...
new CopyWebpackPlugin([
{
from: path.join(__dirname, '../static'),
to: path.join(__dirname, '../dist/electron/static'),
ignore: ['.*']
},
{
from: path.join(__dirname, '../src/renderer/assets/images/icon.png'),
to: path.join(__dirname, '../dist/electron/static/icon.png')
}
])
...
)
}