suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Dynamisches Routing im Vue 3 + Vite-Entwicklungsserver verursacht 404-Fehler beim Neuladen der Seite

In meinem Projekt verwende ich Vue 3.2.36 + Vite 2.9.9 + VueRouter 4.1.3

Ich verwende npm run dev, um den Entwicklungsserver auszuführen.

Meine Routendefinition:

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

Wenn ich router.push({name: 'userDetails', params: {login: 'john.smith'}}) 以编程方式导航时,userDetails verwende, wird die Seite/Komponente korrekt angezeigt.

Aber wenn mein Browser neu lädt, gibt der Entwicklungsserver 404 zurück und die NotFound-Komponente wird nicht angezeigt.

Chrome:


FF:


Arbeitsbeispiel: hier

Ich habe das Problem auf Vite beschränkt. Mit der Vue-CLI funktioniert alles einwandfrei.

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

Meins überprüftindex.html:


Ich habe die Dokumentation zum historischen Modus von vue-router 历史模式文档,并在警告部分中指出,如果未找到路由,路由器应默认为 index.htmlvue-router

überprüft und im Abschnitt mit den Warnungen steht, dass der Router standardmäßig auf 🎜 eingestellt sein sollte, wenn keine Route gefunden wird, und dass er dies über die Vue-CLI, aber nicht über Vite tut. 🎜
P粉811329034P粉811329034405 Tage vor1052

Antworte allen(2)Ich werde antworten

  • P粉757556355

    P粉7575563552023-10-28 00:56:43

    我的 Web 应用程序位于 Azure DevOps 上,但位于 Linux 上 对于 Linux Web 应用程序,您必须添加下一个命令才能在启动时运行 Web 应用程序命令。这对我有用。

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

    您可以在本文中查看更多内容 Azure webapp linux 上的 React 应用

    Antwort
    0
  • P粉011684326

    P粉0116843262023-10-28 00:30:48

    是的,它知道 Vite 中的bug
    解决方案是在 Vite 中使用 插件,如所述 此处

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

    Antwort
    0
  • StornierenAntwort