项目目录

├─ web
│  ├─ src
│  │  ├─ pages
│  │  │  ├─ admin
│  │  │  │  ├─ App.vue
│  │  │  │  ├─ main.js
│  │  │  │  └─ views
│  │  │  ├─ index
│  │  │  │  ├─ App.vue
│  │  │  │  ├─ main.js
│  │  │  │  └─ views
│  ├─ admin.html
│  ├─ index.html
│  ├─ package.json
│  └─ vite.config.js
└─ README.md

问题描述

index 路由为 createWebHistory('/')
admin 路由为 createWebHistory('/admin')

跳转到子页面/admin/是正常的，但刷新路由丢失。
跳转到子页面/admin/xxx,刷新路由就会丢失。配置了路由守卫触发跳转/404,开发环境下通过浏览器network发现请求回来的是index.html

原因分析：

history模式就是vite开发服务器把浏览器的url当成后端路由，/subPage/它能找到/subPage/index.html。

所以/subPage/的主页没错。/subPage/list找不到这个资源，vite开发服务器已经内部处理好了返回/index.html。

这个其实是不正确的index.html，导致路由丢失。换成hash模式是没问题的，如/subPage/#/list。浏览器不会把#后面的当作后端路由，不会去发送请求，资源由前端处理。

引用自：blog.csdn.net/usernotdefi…

解决方案：vite-plugin-mpa-plus

// 此处只展示相关联代码
import path from 'path'
import mpaPlugin from 'vite-plugin-mpa-plus'
const resolve = path.resolve
const pages = [
  {
    entry: resolve(__dirname, './src/pages/index/main.js'),
    filename: resolve(__dirname, './index.html'),
    template: resolve(__dirname, './index.html'),
  },
  {
    entry: resolve(__dirname, './src/pages/admin/main.js'),
    filename: resolve(__dirname, './admin.html'),
    template: resolve(__dirname, './admin.html'),
  },
]
export default defineConfig({
  //...
  plugins: [
    mpaPlugin({
      pages,
      historyApiFallback: {
        rewrites: [{ from: /\/admin/, to: '/admin.html' }],
      },
    }),
  ],
  build: {
    //...
    rollupOptions: {
      input: {
        index: path.resolve(__dirname, 'index.html'),
        admin: path.resolve(__dirname, 'admin.html'),
      },
  },
})