在 Electron Forge 打包应用中，直接通过 window.location.href='result.html' 跳转会导致路径失效——因生产环境资源被封装进 ASAR 归档，需改用 IPC 机制实现页面间安全导航。
在 electron forge 打包应用中，直接通过 window.location.href='result.html' 跳转会导致路径失效——因生产环境资源被封装进 asar 归档，需改用 ipc 机制实现页面间安全导航。
Electron 并非传统浏览器环境：其主进程（Main Process）与渲染进程（Renderer Process）严格隔离，HTML 页面的“跳转”不能依赖前端原生导航（如 <a href></a> 或 window.location），尤其在打包后，静态 HTML 文件不再以可直接访问的文件路径存在，而是被嵌入 ASAR 包中。此时，result.html 无法通过相对路径被 index.html 直接加载，导致“File not found”错误。
✅ 正确做法是：通过 IPC（Inter-Process Communication）触发主进程加载目标 HTML 文件。这既符合 Electron 安全模型，又兼容开发与生产环境（loadFile() 自动处理 ASAR 内路径解析）。
✅ 实现步骤
-
在主进程（如
main.js或main.ts）注册 IPC 处理器
确保mainWindow已创建并可访问：
// main.js
const { app, BrowserWindow, ipcMain } = require('electron');
function createWindow() {
const mainWindow = new BrowserWindow({
width: 1024,
height: 768,
webPreferences: {
contextIsolation: true, // 推荐启用
preload: path.join(__dirname, 'preload.js') // 后续需配置 preload
}
});
mainWindow.loadFile('index.html'); // 首页启动
return mainWindow;
}
// 监听渲染进程发来的导航请求
ipcMain.on('navigate-to-result', () => {
if (mainWindow) {
mainWindow.loadFile('result.html'); // ✅ loadFile 自动解析 ASAR 中路径
}
});
-
在渲染进程（
index.html）中通过preload.js暴露安全 IPC 调用
⚠️ 注意：ipcRenderer默认在上下文隔离（contextIsolation: true）下不可直接访问，必须通过preload.js显式暴露：
// preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('api', {
navigateToResult: () => ipcRenderer.send('navigate-to-result')
});
-
修改
index.html的按钮逻辑（移除内联 JS，使用标准事件监听）
<!-- index.html -->
<title>Home</title><button class="button is-primary" id="scanButton">Scan</button>
<script>
// ✅ 使用 preload 暴露的 API，安全且跨环境一致
document.getElementById('scanButton').addEventListener('click', () => {
window.api.navigateToResult();
});
</script>
? 补充说明与最佳实践
-
不要使用
__dirname拼接路径：loadFile()接收的是相对于应用根目录的路径（如'result.html'），而非 Node.js 文件系统路径；手动拼接path.join(__dirname, 'result.html')在 ASAR 环境下会失败。 -
避免
loadURL('file://...')：该方式易受 ASAR 路径限制且存在安全风险，loadFile()是官方推荐、专为本地 HTML 设计的 API。 -
确保
result.html位于项目根目录或src/下，并在forge.config.js的packagerConfig.extraResource中显式声明（若未自动包含）：// forge.config.js module.exports = { packagerConfig: { extraResource: [ { from: './result.html', to: './result.html' } ] } }; - 增强健壮性（可选）：可在 IPC 响应中加入错误处理，例如主进程返回加载结果，渲染进程监听确认：
// 主进程
ipcMain.handle('navigate-to-result', async () => {
try {
await mainWindow.loadFile('result.html');
return { success: true };
} catch (err) {
console.error('Failed to load result.html:', err);
return { success: false, error: err.message };
}
});
// 渲染进程（preload.js 中扩展）
contextBridge.exposeInMainWorld('api', {
navigateToResult: () => ipcRenderer.invoke('navigate-to-result')
});
通过以上方式，你的 Electron Forge 应用即可在开发与打包后均稳定实现多页面导航，同时遵循现代 Electron 的安全架构规范。
