Electron搭配Create React App构建后exe无法加载问题求助

问题原因分析 #

1. net::ERR_FILE_NOT_FOUND错误原因 #

• create-react-app默认打包生成的静态资源引用路径为绝对路径/，使用file://协议打开本地文件时，绝对路径会指向系统根目录，无法定位到你的项目build文件夹下的css、js等资源，导致资源加载失败。
• 打包后electron主进程文件的存放位置和build文件夹的相对路径和你代码中写的../build/index.html不匹配，导致找不到入口html文件。
• electron打包配置未将build文件夹包含进最终的程序包，运行时找不到对应目录。

2. 添加Routes后组件不渲染原因 #

• 你大概率使用了BrowserRouter作为路由根组件，BrowserRouter基于http/https协议的history API实现，完全不兼容file://协议的路径规则，打包后用file协议打开时根路由/匹配失效，所以组件不会渲染。

可行解决方案 #

第一步：修复资源找不到错误 #

• 打开项目根目录的package.json，新增配置项"homepage": "."，强制create-react-app打包时生成相对路径的资源引用，适配file协议。
• 核对electron主进程路径：打包前先打印path.join(__dirname, "../build/index.html")的实际输出，确认路径正确。如果你的electron.js打包后和build文件夹同级，将路径修改为path.join(__dirname, "build/index.html")即可。
• 检查electron打包配置，以electron-builder为例，需要在package.json的build配置中声明包含build文件夹：

"build": {
  "files": [
    "electron.js",
    "build/**/*"
  ]
}

第二步：修复路由不渲染问题 #

• 替换路由组件：将项目中使用的BrowserRouter换成HashRouter，HashRouter基于URL的hash段（#后的内容）实现路由，不需要依赖http协议，完美适配file协议场景，只需修改路由入口的导入语句即可：

// 替换前
import { BrowserRouter as Router } from 'react-router-dom'
// 替换后
import { HashRouter as Router } from 'react-router-dom'

• 验证：修改完成后先本地直接打开build文件夹下的index.html，确认浏览器中可正常渲染组件，再重新打包electron即可。

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