文章目录1. 先看不用它你要怎么写2. 用 import.meta.glob 后一行搞定3. 核心为什么必须用 meta.glob✅ 1. **批量导入文件**最核心用途✅ 2. **Vite 编译时静态分析**✅ 3. **支持通配符**✅ 4. **懒加载优化性能**4. 完整实用用法你项目里真实会用的5. 一句话总结总结为什么要用import.meta.glob加载 SVG 图标库呢? 看到的这段代码import.meta.glob(../../../assets/icons/svg/*.svg)是Vite 专属的静态资源批量导入语法核心作用是一次性自动导入指定目录下的所有匹配文件不用手动一个个写import。我给你用最通俗、最清晰的方式讲透它的作用、优势和原理1. 先看不用它你要怎么写如果不用import.meta.glob你想加载 10 个 SVG 图标必须手动逐个导入// 手动导入麻烦到爆炸importicon1from../../../assets/icons/svg/user.svgimporticon2from../../../assets/icons/svg/home.svgimporticon3from../../../assets/icons/svg/setting.svg// ... 几十个图标要写几十行缺点新增/删除图标时必须手动改代码代码冗余、易出错无法动态匹配文件2. 用import.meta.glob后一行搞定// 自动匹配目录下所有 .svg 文件constmodulesimport.meta.glob(../../../assets/icons/svg/*.svg)它会自动做这些事扫描指定目录匹配所有.svg后缀文件生成一个文件路径 → 模块的映射对象支持懒加载默认或全量导入最终得到的modules长这样{../../../assets/icons/svg/user.svg:()import(./user.svg),../../../assets/icons/svg/home.svg:()import(./home.svg),// ...所有文件自动生成}3. 核心为什么必须用meta.glob✅ 1.批量导入文件最核心用途专门用来加载图标、图片、markdown、组件等批量静态资源尤其适合图标库。✅ 2.Vite 编译时静态分析import.meta.glob是Vite 在编译阶段执行的不是运行时。打包时会自动处理路径生产环境会正确替换资源 URL支持热更新新增图标自动生效✅ 3.支持通配符*.svg当前目录所有 SVG**/*.svg递归所有子目录比手动导入灵活 100 倍✅ 4.懒加载优化性能默认是懒加载用到时才加载不会一次性加载所有图标提升页面速度。4. 完整实用用法你项目里真实会用的// 批量导入所有 SVG eager: true 表示立即加载不懒加载 consticonModulesimport.meta.glob(../../../assets/icons/svg/*.svg,{eager:true})// 处理成图标名: 路径 的格式consticons{}for(constpathiniconModules){consticonNamepath.split(/).pop().replace(.svg,)icons[iconName]iconModules[path].default}// 直接使用icons.home、icons.user、icons.setting...exportdefaulticons5. 一句话总结import.meta.glob Vite 提供的「批量文件自动导入工具」专门解决静态资源太多、手动导入太麻烦、新增文件要改代码的问题。总结不用它手动一个个 import繁琐易错用它一行代码批量导入所有 SVG自动更新、编译优化适用场景图标库、批量图片、多语言文件、markdown 文档等