electron-vue 用 electron-packager 打包的问题备忘

Posted 2021-01-06 zichi

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 指出可以注释一段代码解决问题