Electron在VS Code中运行报错：Not allowed to load local resource排查

嘿，这个问题我之前也碰到过，核心就是Electron启动时的工作目录不一致导致的，咱们一步步说清楚：

为什么会出现这个报错？ #

• 启动路径的差异是关键：
  当你用npm start启动时，命令是在你的项目根目录执行的，这时候Electron的工作目录就是你的项目根，所以你用相对路径scripts/ui/startup/startup.html能正确找到文件。
  但VS Code直接调用/usr/local/bin/electron启动时，Electron的工作目录变成了它的安装目录（也就是你看到的/usr/local/lib/node_modules/electron/dist/Electron.app/Contents/Resources/），这时候你的相对路径会基于这个目录去查找，自然找不到你项目里的文件，就抛出了"Not allowed to load local resource"的错误。
• 之前正常的原因：
  没加跳转代码时，你加载index.html的方式应该是正确的（比如用了绝对路径，或者Electron默认从工作目录加载时，当时的工作目录刚好是项目根），但添加跳转后用了相对路径，就暴露了工作目录不一致的问题。

解决办法（三种任选其一） #

1. 用__dirname构建绝对路径（最推荐，不受启动方式影响） #

在你的主进程脚本里，不要用相对路径，而是借助Node.js的__dirname（当前脚本所在的目录）来拼接出绝对路径，这样不管从哪启动都能找到文件：

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: false, // 根据你的Electron版本调整，确保路径能正确解析
      nodeIntegration: true
    }
  });

  // 假设你的主进程脚本在项目根目录，拼接出startup.html的绝对路径
  const startupHtmlPath = path.join(__dirname, 'scripts', 'ui', 'startup', 'startup.html');
  win.loadFile(startupHtmlPath);
}

app.whenReady().then(createWindow);

2. 配置VS Code的调试工作目录 #

如果习惯用VS Code的调试功能启动，修改.vscode/launch.json，给启动配置加上cwd字段，指定工作目录为你的项目根：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron: Main",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/main.js", // 替换成你的主进程文件路径
      "runtimeExecutable": "/usr/local/bin/electron",
      "cwd": "${workspaceFolder}" // 关键：设置工作目录为项目根
    }
  ]
}

3. 在VS Code终端用npm start启动 #

直接在VS Code的终端里运行npm start，这样启动环境和你手动在项目根执行命令一致，工作目录正确，相对路径就能正常识别。

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