《Vite 基础知识》使用 Glob 动态加载 .vue 文件

前言

开发基于 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 且非常高效的全局库。

一个 *：匹配当前目录下的文件；
两个 *：匹配当前目录及其嵌套的全部子目录下的文件；

​​
​

最后

正在学习 Vite，更多知识点详见官网 《功能 - Glob 导入》！