前言

一年前用過electron9到2102年都electron13+了，不過它的味道還是沒變，還是那么的坑！

安裝遇到的問題

electron下載錯(cuò)誤：

我用的是vue3+webpack+electron，需要先創(chuàng)建vue3項(xiàng)目：

雖然命令執(zhí)行沒問題，但當(dāng)編譯輸入 npm run electron:serve 時(shí)會報(bào)錯(cuò)。

大概意思是：electron文件錯(cuò)誤，請刪除node_modules重新安裝。

我試了cnpm、yarn、改鏡像源都不行，真滴離譜。

解決

方法1

• 刪除node_modules中的electron文件夾

• 在根目錄創(chuàng)建?.npmrc?文件，寫入如下字段：

之后 npm install electron 重新安裝即可。

方法2

• 去?https://github.com/electron/electron/releases?手動下載你對應(yīng)版本的electron，

  選擇electron-vXX-win32-x64.zip并解壓。

• 之后到項(xiàng)目的node_modules找到electron文件夾

• 在electron文件夾中創(chuàng)建 path.txt (內(nèi)容為 electron.exe 即可)

• 繼續(xù)創(chuàng)建 dist 文件夾(將剛才electron-vXX-win32-x64.zip解壓后的所有文件復(fù)制到這)

• 之后執(zhí)行 npm run electron:serve 就可以運(yùn)行了

開發(fā)遇到的問題

如果要在.vue文件中使用node.js庫則需將nodeIntegration字段改為true。

找到background.js顯示 Use pluginOptions.nodeIntegration, leave this alone，

大概意思就是去pluginOptions更改，別管這的nodeIntegration。

由于我是vue+electron，所以本項(xiàng)目的配置文件為根目錄的vue.config.js(沒有則自行創(chuàng)建)

文件樣例如下：

打包遇到的問題

問題1

執(zhí)行npm run electron:build一直卡在downing。

大概就是國內(nèi)網(wǎng)不行，需要設(shè)鏡像。

解決

在根目錄創(chuàng)建 .npmrc 文件(同文章開頭的安裝問題)，寫入如下字段：

之后執(zhí)行 npm run electron:build 即可

問題2

使用自己的favicon.ico圖標(biāo)時(shí)報(bào)錯(cuò)。

解決

1. 首先，electron的圖標(biāo)必須為256x256大小。

   一開始用的在線制作網(wǎng)站顯示不能識別我的ico文件，之后用 格式工廠 轉(zhuǎn)換才成功。

2. ?其次，vue.config.js中的圖標(biāo)路徑錯(cuò)誤。

   我一開始配置的相對路徑 ?public/favicon.ico 報(bào)錯(cuò)，估計(jì)是electron開發(fā)和打包兩個(gè)環(huán)境的靜態(tài)資源路徑不同引起的。最后直接改為絕對路徑了，真滴煩，配置文件如下：