Electron打包后无法加载本地资源求助：运行正常打包报错

问题概况 #

运行electron .可正常启动应用，但使用electron-builder打包后出现白屏，控制台抛出错误：

Not allowed to load local resource: file:///Applications/Brahmani/brahmani/dist/mac-arm64/brahmani.app/Contents/Resources/app/build/build/index.html

未打包运行时存在Node集成相关警告。

相关代码配置 #

主进程代码 #

const { app, BrowserWindow } = require('electron');
const path = require('path');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1300,
    height: 1000,
    icon: path.join(__dirname,"/logo.png"),
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadURL(`file://${path.join(__dirname, '../build/index.html')}`);

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

主package.json配置 #

{
  "name": "brahmani",
  "version": "0.1.0",
  "private": false,
  "main": "main.js",
  "description": "local app",
  "author": "me",
  "scripts": {
    "electron": "electron .",
    "electron-build": "electron-builder"
  },
  "build": {
    "files": [
      "**/*"
    ],
    "win": {
      "target": "nsis"
    }
  },
  "devDependencies": {
    "electron": "^27.1.3",
    "electron-builder": "^24.9.1"
  }
}

React相关package.json配置 #

{
  "name": "brahmani",
  "version": "0.1.0",
  "private": false,
  "main": "src/main.js",
  "dependencies": {
    "@headlessui/react": "^1.7.17",
    "@heroicons/react": "^2.0.18",
    "@reduxjs/toolkit": "^1.9.7",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "formik": "^2.4.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.12.0",
    "react-redux": "^8.1.3",
    "react-router-dom": "^6.20.0",
    "react-scripts": "5.0.1",
    "react-to-print": "^2.14.15",
    "serve": "^14.2.1",
    "web-vitals": "^2.1.4",
    "yup": "^1.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "build": {
    "directories": {
      "buildResources": "build",
      "app": ""
    },
    "files": [
      "**/*"
    ]
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "tailwindcss": "^3.3.5"
  }
}

额外说明 #

• 已安装react-router-dom但未实际使用
• Electron与React应用同目录，共享单个package.json，此前相同结构应用可正常运行

问题分析与解决方案 #

核心问题 #

1. 打包后React的build目录被错误嵌套，主进程加载路径在打包前后不一致，导致资源找不到
2. nodeIntegration: true违反Electron安全规范，触发警告且存在风险

解决步骤 #

1. 动态调整HTML加载路径

使用app.isPackaged判断打包状态，替换主进程中loadURL代码：

// 替换原loadURL行
const loadPath = app.isPackaged 
  ? path.join(__dirname, 'build/index.html') 
  : path.join(__dirname, '../build/index.html');
mainWindow.loadFile(loadPath); // 改用loadFile避免file://拼接错误

2. 修正package.json打包配置

• 删除React配置中的build节点，避免electron-builder混淆资源路径
• 精简主package.json的build.files，明确指定需要打包的资源：

"build": {
  "files": [
    "main.js",
    "logo.png",
    "build/**/*"
  ],
  "win": {
    "target": "nsis"
  }
}

3. 替换不安全的Node集成配置

高版本Electron不推荐直接开启nodeIntegration，改用preload脚本实现安全的API暴露：

// 修改BrowserWindow的webPreferences
webPreferences: {
  contextIsolation: true,
  nodeIntegration: false,
  preload: path.join(__dirname, 'preload.js')
}

新建preload.js示例（按需暴露API）：

const { contextBridge } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  // 在这里定义需要暴露给渲染进程的API
});

4. 重新打包验证

执行以下命令完成构建与打包：

npm run build
npm run electron-build

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