Le routage dynamique dans le serveur de développement Vue 3 + Vite provoque une erreur 404 lors du rechargement de la page

Question

Dans mon projet j'utilise Vue 3.2.36 + Vite 2.9.9 + VueRouter 4.1.3

J'utilise npm run dev pour exécuter le serveur de développement.

Ma définition d'itinéraire :

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

Lorsque j'utilise router.push({name: 'userDetails', params: {login: 'john.smith'}}) 以编程方式导航时，userDetails la page/le composant s'affiche correctement.

Mais si mon navigateur recharge, le serveur de développement renvoie 404 et le composant NotFound n'apparaît pas.

Chrome :

FF :

Exemple fonctionnel : ici

J'ai isolé le problème pour Vite. Tout fonctionne bien avec Vue CLI.

Mon 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";',
        },
      },
    },
  };
});

J'ai vérifié le mienindex.html :

J'ai vérifié la documentation du mode historique de vue-router 历史模式文档，并在警告部分中指出，如果未找到路由，路由器应默认为 index.htmlvue-router

et dans la section des avertissements, il indique que le routeur doit utiliser par défaut 🎜 si une route n'est pas trouvée, et qu'il le fait en utilisant Vue CLI, mais pas en utilisant Vite. 🎜

Answer 1

Mon application web est sur Azure DevOps mais sous Linux Pour les applications Web Linux, vous devez ajouter la commande suivante pour exécuter la commande d'application Web au démarrage. Cela fonctionne pour moi.

pm2 serve /home/site/wwwroot --no-daemon --spa

Vous pouvez en savoir plus dans cet article Application React sur Azure webapp Linux

Answer 2

Oui, il est au courant du bug de Vite.
La solution est d'utiliser le plugin dans Vite comme décrit ici

Pour moi, c'est un non-non. Je vais passer à Vue CLI.
Je ne veux pas avoir affaire à ce genre de petit monstre.
Je reviendrai à Vite dans quelques années.