【vite 自动配置路由】

手动配置路由，是一个没有技术含量又浪费时间的工作。本文将介绍 vite 构建的 vue3 项目如何编写一个自动配置路由的脚本。

约定大于配置

要想使用脚本完成路由的自动配置，我们就需要遵循以下目录规则：

1. 每一个页面对应一个包，当前包下的主页面命名为index.vue；
2. 每个包里必须配置一个page.js；
3. 在每一个page.js里边配置，额外的路由信息，比如：

   export default {
        
    	title: '商品',
   	menuOrder: 2
   }
   

原理

因为vite使用的打包工具是rollup，我们可以通过它提供的glob()方法取得目录文件信息，通过一些匹配规则，在解析时自动生成路由。

但是，注意，扫描目录只能生成路由，没有额外的路由信息，如果需要配置额外的路由信息，我们需要配置一个新的page.js文件来配置，并将其配置到脚本中。

代码

// 匹配views目录下的所有page.js，导入页面模块
const pageModules = import.meta.glob(