Penghalaan dinamik dalam pelayan pembangunan Vue 3 + Vite menyebabkan ralat 404 pada muat semula halaman
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
