Vite+Vue3项目实现路由自动化，根据src文件夹下（多级文件夹）所有.vue文件路径实现路由自动匹配生成。

实现的两种方式：

一、使用vite-router-automation插件包实现vite环境下的vue路由自动化

vite-router-automation地址：https://www.npmjs.com/package/vite-router-automation

二、使用vite的Glob 导入方法实现vite环境下的vue路由自动化

1、问题：vite环境下的vue路由自动化

我们在写vite+vue3项目的时候，总是需要手动的去为每一个.vue文件去手动设置路由，这样做很麻烦，也会占用大量的时间去维护开发，如果我们能自动生成路由，这样就会很方便。

2、知识点及原理

1、原理：Glob 导入
Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块：
Vite Glob 导入官方文档：https://cn.vitejs.dev/guide/features.html#glob-import

// 导入文件
const modules = import.meta.glob('./dir/*.js')


// 下面是vite 根据上面的方法生成的代码
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
  './dir/bar.js': () => import('./dir/bar.js'),
}

2、知识点：forEach、replace、push、module（语法）、Vue Router

3、具体实现方式

function Sroutes(url,options) {
  const files = import.meta.glob('/src/**/*.vue');
  let route = [];
  for (const key in files) {
    const fileName = key.replace(new RegExp(url,'g'),"/").replace(/(\.\/|\.vue)/g, "").replace(new RegExp('/src','g'),"").replace(new RegExp('/views','g'),"").replace(new RegExp('/components','g'),"");
    const fileName2 = key.replace(/(\.\/|\.vue)/g, "").replace(new RegExp('/src','g'),"");
    if (fileName !== '/App') {
      if (fileName == '//') {
        route.push({
          path: '/',
          name: url,
          meta:options,
          component:()=>import(`..${url}.vue`)
        })
      } else {
        route.push({
          path: fileName,
          name:fileName,
          meta:options,
          component:()=>import(`..${fileName2}.vue`)
        })
      };
    };
  };
  return route;
};
const autoRoute = Sroutes('/views/index',{header:true,footer:true});
console.log('最终文件数据',Sroutes('/views/index',{header:true,footer:true}))

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: autoRoute
});

到这就具体实现了vite+vue3项目的路由自动匹配生成，无论几级文件夹都可以自动匹配生成相关的路由规则，而我们如要使用，直接写文件地址即可跳转，上面只是初步实现了路由的自动生成，URL传值，meta定制，路由守卫这些还有待继续完善

本文原创，原创不易，如需转载，请联系作者授权。