Electron打包生成的EXE无法加载React应用问题求助

问题现象 #

使用electron-packager通过npm run eb命令打包React+Electron项目，生成的Windows端EXE无法渲染React应用；但先运行npm start后再打开该EXE，就能正常显示React页面。

核心原因 #

打包流程未生成React生产环境静态资源，且Electron加载路径指向错误，导致EXE无法找到编译后的React页面文件。

解决方案 #

• 先执行React生产构建
  运行npm run build命令，在项目根目录生成build文件夹，里面包含编译好的React静态资源（HTML、CSS、JS等）。

• 修改Electron的页面加载路径
  修改public/electron.js中的loadURL路径，非开发环境指向build目录下的index.html：

  win.loadURL(
    isDev
      ? 'http://localhost:3000'
      : `file://${path.join(__dirname, '../build/index.html')}`
  );
  

  注：打包后__dirname指向resources/app/public，需向上跳转一级到app目录，才能正确访问同级的build文件夹。

• 修正打包命令
  更新package.json中的eb脚本，确保先构建React资源再执行打包：

  "scripts": {
    // ...保留原有其他命令
    "eb": "npm run build && electron-packager ./ cddf --platform=win32 --arch=x64 --out=dist --overwrite"
  }
  

  解释：--out=dist指定打包产物输出到dist目录，--overwrite覆盖已有打包文件，避免缓存问题。

• 验证打包资源完整性
  打包完成后，打开dist/cddf-win32-x64/resources/app目录，确认存在build文件夹和public/electron.js，且build内包含完整的React静态文件。

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