Penghalaan dinamik dalam pelayan pembangunan Vue 3 + Vite menyebabkan ralat 404 pada muat semula halaman

Question

Dalam projek saya, saya menggunakan Vue 3.2.36 + Vite 2.9.9 + VueRouter 4.1.3

Saya menggunakan npm run dev untuk menjalankan pelayan pembangunan.

Definisi laluan saya:

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

Apabila saya menggunakan router.push({name: 'userDetails', params: {login: 'john.smith'}}) 以编程方式导航时，userDetails halaman/komponen dipaparkan dengan betul.

Tetapi jika penyemak imbas saya memuat semula pelayan pembangunan mengembalikan 404 dan komponen NotFound tidak muncul.

Chrome:

FF:

Contoh kerja: di sini

Saya telah mengasingkan isu itu kepada Vite. Semuanya berfungsi dengan baik menggunakan Vue CLI.

vite.config.js saya:

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

Semak milik sayaindex.html:

Semak dokumentasi mod sejarah vue-router 历史模式文档，并在警告部分中指出，如果未找到路由，路由器应默认为 index.htmlvue-router

dan ia menyatakan dalam bahagian amaran bahawa penghala harus lalai kepada 🎜 jika laluan tidak ditemui dan bahawa ia melakukan ini menggunakan Vue CLI, tetapi bukan Vite. 🎜

Answer 1

Aplikasi web saya menggunakan Azure DevOps tetapi pada Linux Untuk aplikasi web Linux, anda mesti menambah arahan seterusnya untuk menjalankan arahan aplikasi web semasa permulaan. Ini berfungsi untuk saya.

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

Anda boleh menyemak lebih lanjut dalam artikel ini React app pada Azure webapp linux

Answer 2

Ya, ia menyedari pepijat dalam Vite.
Penyelesaiannya adalah dengan menggunakan plugin dalam Vite seperti yang diterangkan di sini

Bagi saya, ini adalah tidak-tidak. Saya akan bertukar kepada Vue CLI.
Saya tidak mahu berurusan dengan raksasa kecil ini.
Saya akan melawat Vite lagi dalam beberapa tahun.