Electron Forge应用打包后无法访问result.html，开发环境正常求助

核心原因 #

1. 打包后资源路径结构变化：开发环境下index.html和result.html处于同一目录，但Electron Forge打包后（尤其是结合Webpack/Vite构建时），静态资源会被整合到asar包或特定资源目录，原相对路径不再指向正确位置。
2. 渲染进程无法直接访问__dirname：Electron默认开启上下文隔离（contextIsolation），渲染进程无法直接访问Node.js全局变量（包括__dirname），直接使用会导致路径错误。
3. Asar包的访问限制：打包后的应用通常会把资源打包成asar格式，直接用相对路径访问文件会被asar的封装机制拦截，必须通过Electron提供的API获取正确路径。

解决方案 #

方案1：用Electron的IPC通信实现页面跳转（推荐） #

这是Electron官方推荐的页面切换方式，彻底规避路径问题：

• 主进程（main.js/main.ts）中监听IPC事件，调用loadFile加载页面：

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js') // 必须配置preload脚本
    }
  });

  mainWindow.loadFile('index.html');

  // 监听跳转请求
  ipcMain.on('navigate-to-result', () => {
    mainWindow.loadFile(path.join(__dirname, 'result.html'));
  });
}

app.whenReady().then(createWindow);

• Preload脚本（preload.js）中暴露IPC调用方法：

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

contextBridge.exposeInMainWorld('electronAPI', {
  navigateToResult: () => ipcRenderer.send('navigate-to-result')
});

• 首页按钮点击事件修改为：

<button onclick="window.electronAPI.navigateToResult()">查看结果</button>

方案2：通过Preload脚本传递正确的资源路径 #

如果坚持用window.location跳转，需要在preload中获取正确的绝对路径：

• Preload脚本中暴露result.html的绝对路径：

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

contextBridge.exposeInMainWorld('appPaths', {
  resultHtmlPath: `file://${path.join(app.getAppPath(), 'result.html')}`
});

• 首页按钮点击事件修改为：

<button onclick="window.location.href = window.appPaths.resultHtmlPath">查看结果</button>

方案3：确保静态资源被正确打包 #

检查Electron Forge的配置，确保result.html被包含在打包资源中：

• 如果使用Webpack插件，在webpack.main.config.js或webpack.renderer.config.js中添加copy-webpack-plugin：

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // 其他配置...
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: './result.html', to: './' }
      ]
    })
  ]
};

• 或在package.json的build字段中指定资源：

{
  "build": {
    "files": [
      "index.html",
      "result.html",
      "preload.js"
    ]
  }
}

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