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中格式化element表格中的时间为指定格式,需要的朋友可以参考下2022-05-05
vue是一套构建用户界面的渐进式框架。这篇文章主要介绍了vue cli的相关知识，本文给大家及时的非常全面,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了vue.js绑定事件监听器的方法,结合实例形式分析了vue.js基于v-on事件绑定响应鼠标点击相关操作技巧,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了vue router 动态路由清除方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了Vuex actions 异步操作方法,需要的朋友可以参考下2023-10-10
本文主要介绍了webpack开发vue-cli的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
在 Vue 3 中,访问子组件的 DOM 元素是一个常见的需求,本文将介绍如何在 Vue 3 中使用不同的方法来获取子组件的 DOM 元素,需要的朋友可以参考下2023-08-08
Vue3项目pc端浏览器样式正常但移动端部分样式失效问题的解决方法
这篇文章主要介绍了Vue3项目pc端浏览器样式正常但移动端部分样式失效问题的解决方法,文中通过图文讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-07-07
这篇文章主要为大家学习介绍了Vue3如何使用echarts实现绘制仪表盘，文中的示例代码积极学习，感兴趣的小伙伴可以跟随小编一起学习一下2023-07-07
这篇文章主要介绍了vue 图片转base64本地路径跨域方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-02-02
最新评论