Vue3+vite中使用import.meta.glob
前言:
在vue2中支持require导入模块或文件但是在vue3中已经不支持require导入了,为此vite提供了一个全新的方法import.meta.glob方法来支持批量导入文件
import.meta.glob
匹配到的文件默认是懒加载的，通过动态导入实现，并会在构建时分离为独立的 chunk。如果你倾向于直接引入所有的模块（例如依赖于这些模块中的副作用首先被应用），你可以传入 { eager: true } 作为第二个参数：
const modules = import.meta.glob('./dir/*.js', { eager: true })
使用篇:
区分*和**分别代表什么 "*"是代表所有文件 "**"是代表所有文件夹 你可以理解为枚举 这个是固定的
"*" 指的就是文件那么文件后面肯定可以添加后缀 所有这三个点我们需要先搞明白
//用法一
import.meta.glob("../src/*"); // '*'表示文件 获取src下面所有非文件夹类型文件【重点 仅获取一级目录不是所有目录】
我知道现在对这个所说的一级目录可能有点头晕 没关系接下来看用法三你就明白了
//用法二
import.meta.glob("../src/*.js"); // '*'表示文件 获取src下面所有以.js结尾的文件【重点 仅获取一级目录不是所有目录】
我们已经知道 "*"是代表所有文件 "**"是代表所有文件夹 它们是指目录下的所有而并不是单个文件或文件夹 当我们指定某一个目录那么他就是获取指定目录下的所有文件
//用法三
import.meta.glob("../src/**/*"); // '*'表示文件 获取src下面所有以.js结尾的文件【重点 所有目录下的文件】
//用法四
import.meta.glob(["../src/assets/*", "../src/components/*"]); // 数组写法同时获取指定文件夹下面的所有文件
//用法五
import.meta.glob(["../src/components/**/*","!../src/components/**/index.vue"]) // '!'开头可以忽略结果中的一些文件 获取components文件夹下面所有目录下的文件 排除所有文件夹目录下index.vue的文件