前言
开发基于 Vite + Vue3 的组件库，多个 .vue 文件需要动态加载！
注意 import.meta.globEager 已经弃用，请使用 import.meta.glob 来代替！
使用 Glob
异步方式
- 代码第 1 行，注意使用两个 **，匹配当前目录及其嵌套的全部子目录下的文件；
- 代码第 4 行，异步使用
Promise加载，所以要在then中获取真正的组件对象；
const modules = import.meta.glob('./src/components/**/*.vue');
for (const path in modules) {
modules[path]().then((mod) => {
console.log(path, mod.default);
})
}
同步方式
- 代码第 1 行，相较于异步，同步方式多了配置参数
{ eager: true }； - 代码第 1 行，注意使用两个 **，匹配当前目录及其嵌套的全部子目录下的文件；
- 代码第 4 行，同步加载不需要
Promise处理；
const modules = import.meta.glob('./src/components/**/*.vue', { eager: true });
for (const path in modules) {
console.log(path, modules[path].default);
}
扩展知识
glob 是基于插件 fast-glob 实现的。官网介绍如下：
It’s a very fast and efficient glob library for Node.js.
这是一个基于 node.js 且非常高效的全局库。
一个 *：匹配当前目录下的文件；
两个 *：匹配当前目录及其嵌套的全部子目录下的文件；
文章来源：https://www.toymoban.com/news/detail-802603.html
最后
正在学习 Vite，更多知识点详见官网 《功能 - Glob 导入》！文章来源地址https://www.toymoban.com/news/detail-802603.html
到了这里，关于《Vite 基础知识》使用 Glob 动态加载 .vue 文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
