Electron加载本地index.html报错Not allowed to load local resource求助

我太懂你这种卡壳的感觉了——用electron-webpack-quick-start替换默认代码后，加载本地index.html踩了一堆坑：先是资源加载报错，禁用webSecurity又变成空白页，加了files字段也没好转。其实这都是因为electron-webpack的构建逻辑和普通Electron项目不一样，直接用__dirname找文件会踩路径匹配的坑，下面给你一步步捋清楚解决方案：

一、问题根源拆解 #

electron-webpack会把主进程、渲染进程的代码分开打包：开发环境靠Webpack Dev Server提供服务，生产环境则把资源打包到特定的目录结构里。你之前直接用url.format加载本地文件，没区分开发/生产环境的路径差异，导致Electron找不到资源；而禁用webSecurity只是绕过了安全限制，路径错误的核心问题没解决，所以页面自然空白。

二、分步解决办法 #

1. 先放对index.html的位置 #

建议把index.html放到项目的src/renderer目录下（和渲染进程代码放一起），这样electron-webpack会自动把它纳入打包流程，不用额外配置。要是你非得放根目录，后面得手动加配置确保它被打包到正确位置。

2. 修改主进程代码，适配两种环境 #

把你原来的loadURL代码替换成下面的逻辑，自动区分开发/生产环境加载资源：

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

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 真的不建议禁用webSecurity，这会带来安全风险，咱们用正确路径就能解决问题
      nodeIntegration: true, // 如果需要在渲染进程用Node API就开着，新版本更推荐用preload脚本
      contextIsolation: false, // 配合nodeIntegration使用，用preload的话可以设为true
    },
  });

  // 关键：根据环境变量判断加载方式
  if (process.env.ELECTRON_WEBPACK_WDS_PORT) {
    // 开发环境：直接加载Webpack Dev Server的地址
    mainWindow.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`);
    // 顺手开个开发者工具方便调试
    mainWindow.webContents.openDevTools();
  } else {
    // 生产环境：加载打包后的本地index.html
    // 注意路径：electron-webpack打包后，主进程代码在dist/main，渲染进程资源在dist/renderer
    const htmlPath = path.join(__dirname, '../renderer/index.html');
    mainWindow.loadFile(htmlPath);
  }

  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();
  }
});

3. 确保index.html被打包进去 #

如果你的index.html放在根目录，得修改package.json的files字段，把它加进去：

"files": [
  "*.js",
  "build",
  "node_modules",
  "index.html"
]

要是放在src/renderer目录下，electron-webpack会自动处理，不用额外配置。

4. 验证效果 #

• 开发环境：跑npm run dev，Electron会自动加载Dev Server的地址，页面正常显示。
• 生产环境：跑npm run build，打包完启动应用，就能正确加载本地的index.html了。

三、为啥之前的方法没用？ #

• 禁用webSecurity：只是绕开了Electron的本地资源加载限制，但你的路径还是错的，Electron找不到文件，所以页面空白。
• 添加files字段：如果没把index.html加进去，或者路径配置不对，打包后依然找不到文件，问题自然解决不了。

内容的提问来源于stack exchange，提问作者J.Wennergren