Electron React项目开发环境正常 打包后白屏且devtools断开怎么解决

问题根因及修复方案 #

最可能的直接原因：静态文件加载路径错误 #

你当前代码中使用win.loadURL('./index.html')用相对路径加载入口文件，开发环境下运行时工作目录是项目根目录，路径匹配可以正常加载；但打包后应用的运行工作目录发生变化，相对路径无法定位到打包后的index.html文件，直接导致白屏。
修复方式：

1. 引入path模块处理绝对路径
2. 替换loadURL为更适配本地文件加载的loadFile方法，修改后代码如下：

const path = require('path')
// 原有代码不变
// 替换win.loadURL('./index.html')为下面的代码
win.loadFile(path.join(__dirname, 'index.html'))

其他常见原因 #

• 前端框架打包配置错误：如果你用Vue/React等框架开发前端，需要把打包配置里的publicPath设置为./，避免静态资源（JS/CSS/图片）加载路径错误导致白屏。如果用到了前端路由，需要把路由模式从history改为hash，history模式依赖服务端适配，本地file协议打开无法正常匹配路由。
• Electron权限配置不兼容：如果你使用的是Electron 12+版本，contextIsolation默认开启，即使你配置了nodeIntegration: true，前端代码也无法直接调用Node API，会触发运行时报错导致白屏，需要补充配置contextIsolation: false（仅在你确实需要前端调用Node API时开启，否则不建议关闭该安全配置）。
• 打包资源未包含：检查package.json中electron-builder的build.files配置，确认所有需要的静态资源（index.html、打包后的JS/CSS、静态资源等）都被包含进了安装包，缺失文件也会导致加载失败。

排查步骤 #

1. 不用提前打包成安装包，先执行前端构建命令得到生产环境产物后，直接在本地用electron main.js启动应用，复现问题的同时可以更快调试。
2. 在createWindow方法中添加win.webContents.openDevTools()代码，强制应用启动时自动打开控制台，可直接看到加载过程中的报错信息，比手动打开devtools更稳定，不会出现连接断开看不到报错的问题。

内容的提问来源于stack exchange，提问作者rookiecookie