vite-plugin-pages(用于本人使用)

1、安装
vite-plugin-pages 依赖vue-router运行因此还需要安装vue-router

npm install vue-router@4
npm i -D vite-plugin-pages 

2、配置-vite.config.js中配置

import vue from "@vitejs/plugin-vue";
import Pages from "vite-plugin-pages";
export default {
  plugins: [
    vue(),
    Pages({
      dirs: "src/pages", // 需要生成路由的文件目录，默认就是识别src下面的pages文件
      exclude: ["**/components/*.vue"], // 排除在外的目录，即不将所有 components 目录下的 .vue 文件生成路由
    }),
  ],
};

3、配置-router/index.js配置,main.js中正常挂载路由

import { createRouter, createWebHistory } from "vue-router";
import routes from "~pages";
const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;

4、[…all].vue文件用来适配404页面
5、
上图默认路径为pages/index.vue == path:“/”
pages/about.vue==path:‘/about’
6、route标签

中可以对页面的路径进行修改，并且优先级大于自动生成的路径。