Vue 3 + Vite 开发服务器动态路由页面重新加载返回404

Question

在我的项目中，我使用 Vue 3.2.36 + Vite 2.9.9 + VueRouter 4.1.3
我使用npm run dev.
我的路线定义：

routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/about',
      component: () => import('@/views/About.vue'),
    },
    {
      path: '/user-details/:login',
      name: 'userDetails',
      component: () => import('@/views/User.vue'),
    },
    {
      path: '/:pathMatch(.*)*',
      component: NotFound,
    }
  ],

当我以编程方式导航时，router.push({name: 'userDetails', params: {login: 'john.smith'}})页面userDetails/组件正确显示。
但是如果我浏览器重新加载开发服务器返回 404 并且NotFound组件不会显示。

铬合金：

FF：

工作示例：这里
我已将问题隔离给 Vite。使用 Vue CLI 一切正常。
我的vite.config.js：

import loadVersion from 'vite-plugin-package-version';

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

export default defineConfig(() => {
  return {
    server: {
      port: 8080,
    },
    plugins: [vue(), loadVersion()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
    envDir: './src/configuration',
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/scss/_variables.scss";',
        },
      },
    },
  };
});

检查了我的index.html：
<script type="module" src="/src/main.js"></script>
检查vue-router历史模式文档，在警告部分它说index.html如果找不到路由，路由器应该默认为，并且它使用 Vue CLI 这样做，但不使用 Vite。

Answer 1

是的，Vite 中存在已知错误。
解决方案是使用Vite 中的插件，如下所述

对我来说，这是不行的。我正在切换到 Vue CLI。
不想和这种小妖精打交道。
几年后我会再次访问 Vite。