1. 程式人生 > >electron-vue 用 electron-packager 打包的問題備忘

electron-vue 用 electron-packager 打包的問題備忘

dev electron git 查看 tool window tps 方案 package

starskeeper 的開發漸入尾聲,試著將其打包下,但是滿屏的 error,記錄下防止再次踏坑

首先項目腳手架用的是 electron-vue 項目,在生成項目腳手架的時候會讓你選擇打包方式(electron-packager OR electron-builder),我選擇的是前者

查看項目的 package.json 文件,找到打包到 macOS 平臺的命令 npm build build:darwin,然後報錯了。出錯信息不截圖了,反正原因是我安裝依賴的時候用了 cnpm,改成 npm 就 ok 了,具體原因未知。之後便能順利打包成 .app 文件

然後打開 app,白屏了。在生產環境是打不開 dev 窗口的,這時可以在代碼裏加上類似 mainWindow.openDevTools()

打開窗口,發現是我在 index.ejs 裏用 //xxx 引入了一個 cdn,然後因為打開的文件是本地文件,file 協議開頭的,於是就報錯了,去掉這個沒用的 cdn 引入就 ok 了

之後就順利打包完成了,130M+,自用還可以接受

順便記錄下可能會產生的其他錯誤:

  • node 版本太低(我是 v8.0.0 版本,沒有問題)
  • npm 版本問題(@5.3.0 會有問題,詳見 issue,升級 npm 即可)
  • 白屏問題。這個 issue 指出配置 whiteListedModules 的方案,我有出現如他圖示的 [not cacheable],但是打包結果沒有問題。另,這個 issue 指出可以註釋一段代碼解決問題

electron-vue 用 electron-packager 打包的問題備忘