Angular+Electron应用按Ctrl+R刷新后页面空白问题求助

问题分析 #

首次加载应用正常，但按Ctrl+R刷新后页面空白，控制台报错ERR_FILE_NOT_FOUND，显示请求的URL缺失了末尾的index.html。这是因为Angular作为单页应用（SPA），刷新时Electron会尝试加载对应路由路径的文件，而该路径实际不存在，导致加载失败。

解决方案 #

方案1：通过Electron拦截文件请求（推荐） #

修改main.js，注册file协议拦截器，当请求的资源不存在时自动返回index.html：

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

app.on('ready', () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  // 拦截file协议请求，处理SPA路由 fallback
  protocol.interceptFileProtocol('file', (request, callback) => {
    let url = request.url.slice(7); // 移除"file://"前缀
    // 若请求路径是目录或文件不存在，重定向到index.html
    if (url.endsWith('/') || !fs.existsSync(url)) {
      url = path.join(__dirname, 'dist/renderer/index.html');
    }
    callback({ path: url });
  });

  // 规范路径拼接方式
  mainWindow.loadFile(path.join(__dirname, 'dist/renderer/index.html'));
});

方案2：确保Hash路由配置正确 #

如果你之前尝试useHash无效，检查Angular路由配置是否正确：

在app-routing.module.ts中：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // 你的路由定义
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

补充说明 #

• 你的package.json中start命令的--base-href ./已经正确设置了相对路径，无需修改。
• 最新版Angular默认启用HTML5路由模式，刷新时的路由请求会被Electron当作文件路径处理，这就是问题根源，拦截协议的方式能从底层解决这个冲突。

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