集成vue-router后Electron应用显示空白页面求助

我使用Vue3与独立安装的Electron构建桌面应用，仅渲染组件不使用router-view时应用运行正常，但集成vue-router后页面显示空白。相关实现代码如下：

vite.config.js #

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  base: path.resolve(__dirname, "./dist/"),
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      vue: 'vue/dist/vue.esm-bundler.js'
    }
  }
})

Electron main.js #

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

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

  win.loadFile(`${__dirname}/dist/index.html`);
  win.setAlwaysOnTop(true);
}

app.whenReady().then(() => {
  createWindow();
});

Vue main.js #

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'

createApp(App).use(store).use(router).mount('#app')

router.js #

import { createWebHistory, createRouter } from "vue-router";

import LoginPage from '../pages/LoginPage.vue';
import RegisterPage from '../pages/RegisterPage.vue';
import HomePage from '../pages/HomePage.vue';

const routes = [
  {
    path: "/login",
    name: "Login",
    component: LoginPage
  },
  {
    path: "/register",
    name: "Register",
    component: RegisterPage
  },
  {
    path: "/",
    name: "Home",
    component: HomePage
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router;

1. 替换vue-router的历史模式 #

Electron加载本地HTML文件使用file://协议，HTML5 history模式（createWebHistory()）无法适配这种本地路径环境，会导致路由匹配失败。改用hash模式即可解决：

import { createWebHashHistory, createRouter } from "vue-router";

// ... 路由配置不变

const router = createRouter({
  history: createWebHashHistory(), // 替换为hash模式
  routes
})

export default router;

2. 修正vite.config.js的base配置 #

当前base设置为本地绝对路径，会导致Electron加载资源时路径错误，改为相对路径./：

export default defineConfig({
  base: './', // 修改为相对路径
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      vue: 'vue/dist/vue.esm-bundler.js'
    }
  }
})

3. 确认App.vue存在路由出口 #

确保App.vue中添加了<router-view>，否则路由匹配的组件无法渲染：

<template>
  <div id="app">
    <router-view></router-view> <!-- 必须保留路由出口 -->
  </div>
</template>

4. 重新构建并启动 #

执行Vue项目的构建命令（如npm run build），确保dist目录文件更新后，再启动Electron应用。

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