Vue项目集成Electron与VueRouter遇net::ERR_FILE_NOT_FOUND问题求助

要同时满足开发环境的正常路由访问和Electron生产环境的正常运行，需要从环境区分配置、Electron加载逻辑、Vue Router适配三个方面调整：

1. 区分开发/生产环境配置Vite的base路径 #

修改vite.config.js，根据运行模式设置不同的base：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ mode }) => {
  return {
    plugins: [vue()],
    // 开发环境用根路径，生产环境用相对路径
    base: mode === 'development' ? '/' : './',
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    }
  }
})

作用：开发环境保持http://localhost:5173/的短路径，生产环境构建后所有静态资源使用相对路径，适配Electron的file://协议加载。

2. 修改Electron的加载逻辑，区分环境加载资源 #

修改index.js，开发环境直接连接Vite的Dev Server，生产环境加载构建后的本地文件：

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });

  // 根据环境变量判断加载方式
  if (process.env.NODE_ENV === "development") {
    // 开发环境加载Vite Dev Server，支持热重载
    win.loadURL("http://localhost:5173");
    win.webContents.openDevTools(); // 可选：打开开发者工具
  } else {
    // 生产环境加载构建后的本地HTML文件
    win.loadFile(path.join(__dirname, "dist/index.html"));
  }

  // 处理生产环境路由刷新的404问题
  win.webContents.on("did-fail-load", (event, errorCode) => {
    if (errorCode === -6) { // ERR_FILE_NOT_FOUND
      event.preventDefault();
      win.loadFile(path.join(__dirname, "dist/index.html"));
    }
  });
}

app.whenReady().then(() => {
  createWindow();
  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") app.quit();
});

作用：开发环境Electron直接复用Vite的热重载能力，路由完全正常；生产环境加载本地文件时，拦截路由刷新导致的文件找不到错误，让Vue Router接管路由逻辑。

3. 适配Vue Router的history模式 #

修改src/router/router.js，根据环境设置路由的base路径：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

// 根据环境变量设置路由base
const routerBase = import.meta.env.MODE === 'development' ? '/' : './'

const router = createRouter({
  history: createWebHistory(routerBase),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

作用：确保路由在开发环境使用根路径，生产环境使用相对路径，配合Vite的base配置，实现history模式的短路径访问。

4. 更新package.json的脚本命令 #

添加环境变量设置脚本，确保Electron能识别运行环境：
首先安装跨平台环境变量工具cross-env：

npm install cross-env --save-dev

然后修改package.json的scripts：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron:dev": "cross-env NODE_ENV=development electron .",
    "electron:start": "cross-env NODE_ENV=production electron ."
  }
}

最终效果 #

• 开发环境：运行npm run dev可通过http://localhost:5173/和http://localhost:5173/about正常访问；运行npm run electron:dev，Electron会直接连接Dev Server，支持热重载和正常路由。
• 生产环境：运行npm run build构建后，执行npm run electron:start，Electron能正常加载页面，路由使用history模式的短路径（无#），刷新页面也不会空白。

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