electron打包vue專案

曦12發表於2022-03-05

建立專案

點選這裡

新增electron-builder

1、在專案目錄下執行命令:vue add electron-builder
2、electron-builder新增完成後會選擇electron版本,直接選擇最新版:
image

electron下載失敗

vue add electron-builder下載electron會下載失敗,使用淘寶映象下載:cnpm i electron
image

窗體執行

1、下載完成後嘗試執行electron窗體:npm run electron:serve
image
2、窗體執行成功:
image

打包exe

1、執行打包命令:npm run electron:build
image
2、打包時由於會在github下載包,國內網路一般會失敗,需要手動下載nsis與winCodeSign(網路允許的話你也可以自己到github下載,這裡我下載分享出來了),點選這裡下載,提取碼:1uq8,解壓後將nsis與winCodeSign複製(替換)到以下目錄:
image
3、複製檔案後再次執行打包命令即可打包成功:
image
4、打包完成後,專案目錄下會多出一個dist_eletron,打包出的exe即在其中,此exe需安裝後使用:
image
5、但在dist_eletron的win-unpacked下也會有與專案同名的exe,此exe無需安裝即可執行,但依賴同級目錄下的檔案,不能直接單獨使用:
image

白屏

1、到這裡其實打包就已經成功完成了,但你開啟exe後會發現與在專案中窗體執行不一樣,或者直接白屏,這是由於vue與electron路由模式的原因,vue一般預設history模式。
image
2、需要在router的index.js中修改:從vue-router中引入createWebHashHistory,將createWebHistory(process.env.BASE_URL)改為createWebHashHistory(process.env.BASE_URL)。
image
若為vue2的專案則直接將mode的值從history改為hash:
image
3、刪除專案中的dist_eletron目錄,重新npm run electron:build打包:
image
4、打包成功:
image

相關文章