electron-vue 開發問題合集

（一）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') } ]) ... ) }