vue3+vite+vue-router实现动态读取文件夹名称和addRoute

背景： 随着项目越来越大，项目路由会越来越多，导致我们每次需要到router.js添加路由，非常的繁琐。

方案：借助vite的新增属性 获取文件夹名称及其component 动态加载到 router上

文件目录：

// main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import router from './router';
import './assets/main.css';
const app = createApp(App);

const files = import.meta.glob('./views/Page*.vue'); // 自定义规则
for (let i in files) {
  // console.log(123, i, files[i]);
  const newName = i.replace(/.\/views\//, '').replace(/.vue/, '');
  // console.log(13, newName, newName.toLocaleLowerCase(), files[i]);
  router.addRoute({
    path: '/' + newName.toLocaleLowerCase(),
    name: newName,
    component: files[i],
  });
}

// console.log(123444, router.getRoutes());

app.use(createPinia());
app.use(router);

app.mount('#app');

// route.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
  ],
});

export default router;