Vite+Vue3构建后Vue Router失效，Wails桌面程序空白如何解决？

请提供需要使用Markdown格式化的具体内容，我会按照指定规则为你处理。

若你是需要针对之前的Wails+Vue Router打包空白问题生成符合要求的答案，以下是格式化后的内容：

核心排查方向及解决方案 #

1. 配置Vite相对路径基准 #

Wails打包后前端资源从本地文件加载，必须设置正确的相对路径基准：
修改vite.config.js，添加base: './'配置：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  base: './', // 新增此行，适配本地文件加载路径
})

2. 确认路由配置有效性 #

你已使用createWebHashHistory（无需服务器支持的hash路由），这是正确选择，但需额外检查：

• 确保根路由的redirect: '/index'能正确匹配子路由
• 尝试将路由组件的@别名替换为相对路径测试，比如把import('@/pages/index/index.vue')改为import('../pages/index/index.vue')，验证别名是否在打包时正常生效

3. 校验Wails构建配置 #

检查wails.json中的前端构建参数，确保打包命令和输出目录一致：

"frontend": {
  "build": "npm run build",
  "devServerUrl": "http://localhost:5173",
  "dist": "dist" // 需和Vite打包的输出目录保持一致
}

4. 排查组件引入异常 #

临时全局引入naive-ui，排除按需引入导致的打包遗漏：
修改main.ts：

import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import NaiveUI from 'naive-ui' // 全局替换按需引入
import './style.css';

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

若打包后恢复正常，再逐步排查按需引入的组件列表是否有遗漏或错误。

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