在vite+vue3+ts項(xiàng)目下，實(shí)現(xiàn)根據(jù)文件名稱自動(dòng)生成路由

1、安裝插件

npm install vite-plugin-pages -D
npm install vue-router

2、在vite.config.ts中完成vite-plugin-pages 的配置
pages為放置vue頁面的文件夾名稱

import Pages from 'vite-plugin-pages'
export default defineConfig({
  plugins: [
    vue(),
    /**根據(jù)文件名自動(dòng)生成對應(yīng)路由 @see https://github.com/hannoeru/vite-plugin-pages*/ 
    Pages({
      dirs: [
        {dir: 'src/pages', baseRoute: ''},
        {dir: 'src/pages/active', baseRoute: 'active'},
      ],
      exclude: ['**/components/*.vue'],
    })
)}

3、在main.ts中創(chuàng)建一個(gè)router，并讓 app use

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import './style.css'
import routes from 'pages-generated' // vite-plugin-pages 生成的路由信息
import App from './App.vue'
const router = createRouter({
  history: createWebHistory(),
  routes
})
const app = createApp(App)
app.use(router).mount('#app')

4、在App.vue中添加router-view

<template>
  <router-view />
</template>

5、添加測試頁面

<!-- pages/index.vue -->
<template>
  <div>Hello, Vite</div>
</template>

<!-- pages/activefoo.vue -->
<template>
  <div>foo</div>
</template>