Nuxt3+Electron页面导航失效：无法加载带#的本地资源

报错Not allowed to load local resource的核心原因是：在Electron的file://协议环境下，虽然开启了Vue Router的hash模式，但路由跳转时浏览器错误地将#/mypage/subpage解析为本地文件路径，而非SPA的路由hash标识；同时Nuxt生成的静态资源未配置正确的路由回退规则，导致跳转时无法加载对应路由组件。

1. 修正Nuxt基础路径与静态资源配置 #

修改nuxt.config.ts，将生产环境的基础路径配置到app.baseURL，并指定Nitro的静态回退页面为200.html（确保所有路由请求都指向SPA入口）：

export default defineNuxtConfig({
  // ... 其他原有配置
  app: {
    baseURL: process.env.NODE_ENV === 'production' ? './' : '/', // 生产环境用相对路径
    // ... 其他app配置
  },
  nitro: {
    preset: 'static',
    routeRules: {
      '/*': { fallback: '/200.html' }, // 所有路由回退到SPA入口
    },
  },
  // ... 其他原有配置
})

2. 确保Electron窗口加载正确入口文件 #

在Electron主进程（electron/main.mts）中，明确指定index.html的绝对路径，避免路径解析错误：

import { app, BrowserWindow } from 'electron'
import path from 'node:path'

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, '../.dist-electron/preload.mjs'),
      // 不建议关闭webSecurity，优先通过路径配置解决问题
      // webSecurity: false
    },
  })

  // 加载Nuxt生成的静态首页
  const indexHtmlPath = path.join(app.getAppPath(), '.output/public/index.html')
  mainWindow.loadFile(indexHtmlPath)
}

app.whenReady().then(createWindow)

3. 对齐Vue Router的基础路径配置 #

确认nuxt.config.ts中的路由配置与基础路径保持一致：

export default defineNuxtConfig({
  // ... 其他原有配置
  router: {
    options: {
      hashMode: true,
    },
    base: process.env.NODE_ENV === 'production' ? './' : '/', // 与app.baseURL同步
  },
  // ... 其他原有配置
})

4. 重新构建项目 #

执行以下命令清理缓存、重新生成静态资源并打包：

npx nuxi clean && npx nuxi generate && electron-forge make

• 生产环境必须使用相对路径（./）作为baseURL，避免file://协议下的绝对路径解析错误。
• Nitro的routeRules配置是SPA静态部署的核心，确保所有路由请求都由Vue Router接管解析。
• 不要随意关闭Electron的webSecurity，优先通过正确的路径配置解决资源加载问题，避免安全风险。

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