Ionic + Electron 打包后白屏怎么办?
我用 Ionic 6 和 Electron 搭了个桌面应用,开发时用 ionic serve 跑得好好的,但执行 npm run electron:build 打包成可执行文件后打开就是一片白屏,控制台也没报错。
查了下发现可能是资源路径问题,我试过在 angular.json 里改 baseHref 为 "./",也改了 Electron 的 loadURL 路径,但还是不行。打包后的 dist 目录结构看起来是对的,index.html 也在里面。
有人遇到过类似情况吗?是不是还要配什么 CSP 或者 file 协议相关的设置?
file://${__dirname}/dist/index.html。然后在 angular.json 里设置 baseHref 为 ./ 是对的,但记得同时要在 main.ts 里添加这个判断:
这主要是因为 Angular 在 file 协议下会有些兼容性问题。
关于 CSP 设置,electron 默认的 webPreferences 里的 nodeIntegration 要设为 true,还得加个 contextIsolation: false。当然这不是最佳实践但能先让应用跑起来。
最后再检查下 dist 目录下的文件权限和路径是否正确。按这些改完应该就能正常显示了。有时候开发环境没问题打包出错就是些小细节没注意到,慢慢调吧,祝你好运。