Electron窗口菜单Reload功能加载错误文件问题求助

问题场景 #

打包后的Electron应用，通过系统菜单「Window」-「Reload」或调用window.reload()时，会尝试加载空路径file:///，抛出错误：

electron: Failed to load URL: file:/// with error: ERR_FILE_NOT_FOUND

开发环境通过Vite dev server加载http://localhost:5173一切正常，生产环境启动时用loadFile加载本地index.html也能正常打开，但重载时就会丢失文件路径。尝试添加<base href="./">标签无法解决问题。

原因分析 #

生产环境使用loadFile加载本地HTML文件时，Electron的webContents在执行原生重载操作时，可能会丢失当前页面的文件路径上下文。对于React单页应用来说，路由机制的存在会加重这个问题，导致重载时默认回到根路径而非指定的index.html文件。

可行解决方案 #

方案1：监听加载失败事件，自动修复路径 #

在主进程中监听webContents的did-fail-load事件，当检测到是ERR_FILE_NOT_FOUND且加载路径异常时，重新加载正确的index.html路径：

function createWindow() {
  // ... 原有窗口配置代码 ...

  const productionPath = path.join(appPath, "out/renderer/index.html");

  if (app.isPackaged) {
    mainWindow.loadFile(productionPath);
    // 捕获加载失败并修复
    mainWindow.webContents.on("did-fail-load", (_, errorCode, errorDesc) => {
      if (errorDesc.includes("ERR_FILE_NOT_FOUND") && mainWindow) {
        mainWindow.loadFile(productionPath);
      }
    });
  } else {
    mainWindow.loadURL("http://localhost:5173");
  }

  // ... 其他窗口事件监听代码 ...
}

方案2：替换系统菜单的Reload功能 #

自定义应用菜单，将默认的Reload选项替换为主动加载指定路径的逻辑，从根源避免原生重载的路径问题：

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

function createWindow() {
  // ... 原有窗口配置代码 ...

  const productionPath = path.join(appPath, "out/renderer/index.html");

  if (app.isPackaged) {
    // 构建自定义菜单模板
    const appMenu = [
      {
        label: 'Window',
        submenu: [
          {
            label: 'Reload',
            accelerator: 'CmdOrCtrl+R', // 保留原快捷键
            click: () => mainWindow?.loadFile(productionPath)
          },
          { role: 'minimize' },
          { role: 'close' }
        ]
      }
    ];
    Menu.setApplicationMenu(Menu.buildFromTemplate(appMenu));
  }

  // ... 页面加载代码 ...
}

方案3：渲染进程拦截window.reload() #

在preload脚本中重写window.reload方法，通过IPC通知主进程执行正确的加载逻辑：

// preload.js
const { ipcRenderer } = require('electron');

// 覆盖原生reload方法
window.reload = () => {
  ipcRenderer.send('trigger-reload');
};

// 主进程
const { ipcMain } = require('electron');

// 监听渲染进程的重载请求
ipcMain.on('trigger-reload', () => {
  const productionPath = path.join(app.getAppPath(), "out/renderer/index.html");
  if (!mainWindow) return;
  
  if (app.isPackaged) {
    mainWindow.loadFile(productionPath);
  } else {
    mainWindow.reload(); // 开发环境保留原生重载
  }
});

选择建议 #

• 方案1是侵入性最小的快速修复，无需修改菜单或渲染进程；
• 方案2彻底替换系统默认行为，避免用户触发原生重载；
• 方案3覆盖了代码中调用window.reload()的场景，同时兼容开发/生产环境。

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