Ionic + Electron 打包后白屏怎么办?

上官炳硕 阅读 17

我用 Ionic 6 和 Electron 搭了个桌面应用,开发时用 ionic serve 跑得好好的,但执行 npm run electron:build 打包成可执行文件后打开就是一片白屏,控制台也没报错。

查了下发现可能是资源路径问题,我试过在 angular.json 里改 baseHref"./",也改了 Electron 的 loadURL 路径,但还是不行。打包后的 dist 目录结构看起来是对的,index.html 也在里面。

有人遇到过类似情况吗?是不是还要配什么 CSP 或者 file 协议相关的设置?

我来解答 赞 7 收藏
二维码
手机扫码查看
1 条解答
打工人彦会
遇到这种白屏问题确实挺烦人的,不过我可以分享下我的解决思路。首先确认下 electron 主进程里加载 index.html 的方式,我建议直接用 file 协议加载,像这样 file://${__dirname}/dist/index.html

然后在 angular.json 里设置 baseHref 为 ./ 是对的,但记得同时要在 main.ts 里添加这个判断:

if (window.location.protocol === 'file:') {
(window as any)['global'] = window;
}


这主要是因为 Angular 在 file 协议下会有些兼容性问题。

关于 CSP 设置,electron 默认的 webPreferences 里的 nodeIntegration 要设为 true,还得加个 contextIsolation: false。当然这不是最佳实践但能先让应用跑起来。

最后再检查下 dist 目录下的文件权限和路径是否正确。按这些改完应该就能正常显示了。有时候开发环境没问题打包出错就是些小细节没注意到,慢慢调吧,祝你好运。
点赞
2026-03-26 06:00