问题
通常我们在开发业务时，一个文件夹下会有多个页面路由组件，每当添加一个页面组件需要手动import该组件进行注册路由，这样重复的工作着实让人烦躁，那么有没有更好的方式自动引入注册呢。
如果是小项目还好，几个页面每次都手动import也不怎么费事
webpack
使用require.context
暂没找到官方文档
- require.context接收三个参数
- require.context(directory, useSubdirectories, regExp)
- directory 要检索的目录
- useSubdirectories 是否检索子文件夹
- regExp 匹配文件的正则表达式，通常是后缀文件名（.js/.vue）
- 示例
-
如目录views下有两个vue组件 Aaa.vue和Bbb.vue
views - 导入
- require.png
- 输出modules
- modules
modules输出的信息是一个函数
- 使用Object.keys查看该函数有些什么方法（keys）
- keys
这里我们需要的是keys
- 执行modules.keys()
- modules.keys
此时拿到的是文件路径，可把文件路径作为key值拿到对应的组件
- 遍历keys注册路由
- routes
routes就是我们要注册的路由信息
组件通过modules[key]获取
toLowerCase是为了给用户看到的页面pathname为小写
vite
使用import.meta，其中import.meta下有两个方法import.meta.glob和import.meta.globEager，这里使用import.meta.glob
import.meta是一个给JavaScript模块暴露特定上下文的元数据属性的对象。它包含了这个模块的信息，比如说这个模块的URL MDN
- import.meta.glob，这里只接收一个参数directory 要检索的目录
- modules
modules拿到的是一个对象，对象里每个key对应一个函数，对象的每个key也是文件路径
- 从modules中获取keys
- moduleKeys.png
- 遍历keys注册路由
- routes
本文完~
