vite-plugin-pages
作用
vite-plugin-pages可以读取指定的目录文件，自动化生成路由信息，不需要自己去逐个页面配置
注意
1、vite-plugin-pages基于vue-router，所以使用的时候还是要安装vue-router
2、vite-plugin-pages默认指定的页面文件夹是 pages，默认指定的页面是 index.vue，所以最好先在pages文件夹下面创建一个 index.vue文件
2、vite.config.ts 文件中配置
import Pages from 'vite-plugin-pages'export default {plugins: [Pages({dirs: 'src/views', // 需要生成路由的文件目录exclude: ['**/components/*.vue'] // 排除在外的目录，即不将所有 components 目录下的 .vue 文件生成路由})]}
main.js设置：
import {createApp } from 'vue'import App from './App.vue'import {createRouter, createWebHistory } from 'vue-router'//自动读取pages目录下的页面，不需要自己再写routes// 引入可能会报红，但是别着急，下一步会解决import generatedRoutes from 'virtual:generated-pages'const router = createRouter({history: createWebHistory(),routes: generatedRoutes,})const app = createApp(App)app.use(router).mount('#app')
vite-plugin-vue-layouts
1、vite-plugin-vue-layouts 与上面提到的pages类似，都会读取指定目录文件夹下面的文件。
2、vite-plugin-layouts默认读取的文件夹名字是 layouts，所以要使用的话，要在自己创建一个 src/layouts 文件夹
3、vite-plugin-layouts默认读取的文件是 src/layouts/default.vue 所以第一个文件 最好创建叫做 default.vue，这样比较容易理解、上手
2、vite.config.ts中的配置
import {defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import Pages from "vite-plugin-pages"import Layouts from 'vite-plugin-vue-layouts';export default defineConfig({plugins: [vue(),Pages({dirs: [{dir: "src/views", baseRoute: "" },],importMode: "async",}),Layouts({// 如果是默认 layouts文件夹，默认 default.vue文件，则不需要配置layoutsDirs: 'src/layouts',defaultLayout: 'default',}),}）
3、main文件中的配置
import {createApp } from 'vue'import App from './App.vue'import {createRouter, createWebHistory } from 'vue-router'// 自动读取 layouts文件夹下的文件import {setupLayouts } from "virtual:generated-layouts"import generatedRoutes from 'virtual:generated-pages'const router = createRouter({history: createWebHistory(),routes: setupLayouts(generatedRoutes),})const app = createApp(App)app.use(router).mount('#app')
