vue使用import.meta.glob动态导入多个模块方式
更新时间：2025年10月27日 09:31:53 作者：吃代码长大的前端
文章介绍了Vite提供的`import.meta.glob`功能,用于动态导入多个模块,它通过glob模式匹配文件,返回一个对象,键为文件路径,值为返回Promise的动态导入函数,支持eager模式直接导入和as选项指定导入方式,如原始字符串或文件URL,适用于Vite或Rollup项目
import.meta.glob 是 Vite 提供的一个功能，用于在构建时动态导入多个模块。
它通过 glob 模式匹配文件，返回一个对象，键为文件路径，值为返回 Promise 的动态导入函数。
语法与参数
const modules = import.meta.glob(globPattern, options);
- globPattern：
字符串或字符串数组，支持 glob 模式（如 './modules/*.js'）。
options（可选）：
eager：若为true，直接导入模块而非返回 Promise（默认false）。as：指定导入方式，如'raw'（原始字符串）或'url'（文件 URL）。
使用示例
动态导入文件
匹配 src/features 下所有 .js 文件，按需加载：
const features = import.meta.glob('./src/features/*.js');
for (const path in features) {
features[path]().then((module) => {
console.log(module.default);
});
}
直接导入（eager 模式）
静态加载所有匹配模块：
const modules = import.meta.glob('./lib/*.js', { eager: true });
console.log(modules['./lib/utils.js'].default);
导入为原始内容
获取文件原始字符串或 URL：
const rawFiles = import.meta.glob('./assets/*.txt', { as: 'raw' });
const fileUrls = import.meta.glob('./images/*.png', { as: 'url' });
注意事项
- 仅适用于 Vite 或 Rollup 项目，需在构建时确定模块路径。
- 动态导入的模块会代码分割，生成独立 chunk。
- 路径需相对于当前文件，且需包含扩展名（如
.js）。
与import.meta.globEager的区别
Vite 4 已弃用 globEager，推荐使用 { eager: true } 选项替代。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
关于vue项目中会出现一些需求,就是右键菜单项的功能实现,下面这篇文章主要给大家介绍了关于vue封装一个右键菜单组件(复制粘贴即可使用)的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要为大家介绍了Vue的data为啥只能是函数原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，下面这篇文章主要给大家介绍了关于vue.js简单配置axios的相关资料，需要的朋友们可以参考借鉴，需要的朋友们下面来一起学习学习吧。2017-12-12
这篇文章主要介绍了vue3+ts使用Echarts的实例详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue elementUI 表单校验的实现代码（多层嵌套），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
通过本文,您可以了解如何使用Vue CLI创建Vue 3项目,配置Vite,利用其优势进行开发,具有一定的参考价值,感兴趣的可以了解一下2023-08-08
vue3中如何通过ref和$parent结合defineExpose实现父子组件之间的通信
这篇文章主要介绍了vue3中通过ref和$parent结合defineExpose实现父子组件之间的通信,Vue3中通过ref和$parent的结合使用，及defineExpose的方法，可以非常便捷地实现父子组件之间的通信，需要的朋友可以参考下2023-07-07
这篇文章主要介绍了element 实现导航栏收起展开功能，实现思路先给 el-menu加上 :collapse="isCollapse" 属性，这个属性也是 element 上的一个参数，意思为是否开启折叠动画，在 data 中定义 isCollapse ，用 true 和 false 控制展开与收起，需要的朋友可以参考下2023-01-01
本文将结合实例代码，介绍Vue批量更新dom的实现步骤，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2021-07-07
这篇文章主要介绍了nuxt.js写项目时增加错误提示页面操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论