Electron+React+Vite构建Windows应用报错：无法加载本地资源

1. 修正electron-builder打包配置 #

在package.json的build字段中添加files配置，确保Vite构建产物和Electron主进程文件被完整打包：

"build": {
  "target": "win",
  "win": {
    "icon": "public/icon.png"
  },
  "files": [
    "public/**/*",
    "build/**/*"
  ]
}

• 该配置强制electron-builder将public（Electron主进程文件）和build（React编译产物）目录全部打包进app.asar，避免产物丢失。

2. 调整Electron主进程路径逻辑 #

修改public/electron.js中的路径计算代码，确保打包后能正确定位index.html：

// 替换原url赋值逻辑
const url = isDev 
  ? `http://127.0.0.1:3333/` 
  : `file://${join(app.getAppPath(), 'build', 'index.html')}`;

• 使用app.getAppPath()替代__dirname层级跳转，该方法在打包后直接指向app.asar根目录，拼接build/index.html即可得到正确路径。

同时修正窗口图标路径，避免打包后找不到图标：

icon: join(__dirname, 'icon.png'),

• 打包后__dirname指向app.asar/public目录，直接拼接icon.png即可定位到图标文件。

3. 优化构建脚本（可选） #

将Windows环境下的rm命令替换为跨平台的rimraf，避免执行失败：

1. 安装依赖：

npm install rimraf --save-dev

2. 修改package.json的scripts字段：

"build": "rimraf dist build && vite build && electron-builder && cd dist && explorer ."

验证步骤 #

1. 执行npm run build完成构建
2. 打开dist/win-unpacked目录下的应用程序
3. 检查控制台是否仍有资源加载错误

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