Vue 3 Vite dev server returns 404 on page reload of dynamic route-CodePudding

In my project I use Vue 3.2.36 Vite 2.9.9 VueRouter 4.1.3
I run the dev server with npm run dev.
My routes definition:

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,
    }
  ],

When I programatically navigate with router.push({name: 'userDetails', params: {login: 'john.smith'}}) the userDetails page/component is correctly displayed.
But if I browser reload dev server returns 404 and NotFound component is not displayed.

Chrome:

FF:

Working example: HERE
I've isolated the problem to Vite. Everything works fine with Vue CLI.
My 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";',
        },
      },
    },
  };
});

Checked my index.html:
<script type="module" src="/src/main.js"></script>
Checked vue-router history mode docs and in caveat section it says that router should default to index.html if route is not found, and it does so with Vue CLI, but not with Vite.

CodePudding user response：

Yup, its know bug in Vite.
Solution is to use plugin in Vite as stated here

For me, this is a no go. I'm switching to Vue CLI.
Don't want to deal with this kind of gremlins.
I'll revisit Vite in a couple of years.

CodePudding user response：

You can try a .htaccess file in the dist folder

<IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteBase /
   RewriteRule ^index\.html$ - [L]
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /index.html [L]
</IfModule>

[https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations][1]

As found in [https://gist.github.com/Prezens/f99fd28124b5557eb16816229391afee][2]