In my project I use Vue 3.2.36 Vite 2.9.9 VueRouter 4.1.3

I run the development server using npm run dev.

My route 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 navigate programmatically using router.push({name: 'userDetails', params: {login: 'john.smith'}}) the userDetails page /Component displays correctly.

But if my browser reloads the development server returns 404 and the NotFound component does not show up.

Chrome:

FF：

Working example: here

I've isolated the issue to Vite. Everything works fine using the 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:

Checked the vue-router historical mode documentation and in the warnings section it states that the router should default to index.html if the route is not found, and that it uses the Vue CLI to do this, But don't do this with Vite.