vite glob-import 官方文档 1.引入库 以 Vuex4+ 批量导入store模块为例 假设有如下目录结构

代码：

import { createStore } from 'vuex' 导入模块 const files = import.meta.glob('./module/*.js') 或者 const files = import.meta.globEager('./module/*.js') 注意，路径需为以 ./ 开头）或绝对路径（以 / 开头，相对于项目根目录解析 import.meta.glob 为过动态导入，构建时，会分离为独立的 chunk import.meta.globEager 为直接引入 两者在使用上也有不同的区别 1. const modules = {} for (const key in files) { files[key]().then(res=>{ modules[key.replace(/(\.\/module\/|\.js)/g, '')] = res.default }) } Object.keys(modules).forEach(item => { modules[item]['namespaced'] = true }) export default createStore({ modules, }) 2. const modules = {} for (const key in files) { modules[key.replace(/(\.\/module\/|\.js)/g, '')] = files[key].default } Object.keys(modules).forEach(item => { modules[item]['namespaced'] = true }) export default createStore({ modules, })

如果使用异步导入的方式，会导致一些需要被首先应用的数据无法被获取到，可以根据实际需求，选择不同的导入方式

---

总结

1.引用createStore 2.import.meta.glob 或 import.meta.globEager 导入需要导入的文件，注意路径匹配 3.遍历files，根据导入方式做不同的处理 4.方法不限于vuex的模块导入，这里只是简单的例子

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。