Vite import.meta.glob怎么配置或排查

在 Vite 项目里，import.meta.glob 匹配为空或取值不对，通常不是“模块不存在”，而是路径基准、字面量规则和加载选项混在了一起。先记住一个结论：它是 Vite 提供的编译期 glob 导入能力，模式必须写成字面量；默认返回的是以文件路径为键、以动态导入函数为值的对象。官方地址：https://vite.dev/

先确认 glob 到底匹配了哪些文件

排查时先不要同时加一堆选项。假设目录中有 src/modules/a.js 和 src/modules/b.js，在同级目录的 index.js 中可以这样写：

// 用字面量声明匹配范围，便于 Vite 在构建时静态分析
const modules = import.meta.glob('./modules/*.js')

for (const [path, loadModule] of Object.entries(modules)) {
  // 默认值是动态导入函数，调用后才取得对应模块
  loadModule().then((module) => {
    console.log(path, module)
  })
}

这里的键是匹配到的相对路径，值是函数，不是已经加载好的模块。若对象为空，第一检查项是文件是否真的位于当前文件的相对目录下；第二检查项是模式是否以 ./、/ 或配置的别名开头；第三检查项是扩展名和大小写是否符合预期。glob 的参数不能使用变量或表达式。

默认懒加载与 eager、query 的差别

默认模式适合按需打开页面或功能模块；如果导入模块的副作用必须在初始化阶段完成，可以使用 eager: true：

// eager 会让匹配到的模块直接成为对象值，而不是加载函数
const modules = import.meta.glob('./modules/*.js', { eager: true })

for (const [path, module] of Object.entries(modules)) {
  // 这里直接读取模块对象；不能再写 module()
  console.log(path, module)
}

若只需要某个导出，可以用 import: 'setup' 或 import: 'default' 收窄值。处理 SVG 等资源时，query: '?raw' 通常表示读取原始内容，query: '?url' 则表示取得资源 URL；最终行为还取决于对应插件或资源类型。不要把 query 当成文件过滤条件，它改变的是导入请求。

四个症状对应的修复动作

需要排除某一类文件时，可以把负模式放进数组，例如 ['./modules/*.js', '!**/*.test.js']。如果使用 base，要记住它改变的是导入基准和生成键的相对形式；别名、虚拟模块和路径书写方式也要回到项目的 Vite 配置确认。

为什么“看起来正确”的写法仍会失败

第一，import.meta.glob 不是浏览器或 ECMAScript 标准，直接在普通浏览器脚本、Node 原生脚本里运行不会自动获得 Vite 转换。第二，glob 与动态 import() 不是一回事：前者适合在构建阶段声明一个可分析的文件集合，后者适合有限的运行时文件名场景。第三，模式越宽，打包器需要纳入的模块越多；页面只用到少量模块时，优先缩小目录和扩展名。

改完后按“路径是否命中、返回值类型是否正确、选项是否改变语义”三个问题回看，通常比继续修改业务代码更快定位。相关问题：为什么 eager 后不能再调用返回值？ 因为它已经是模块对象。能否把 glob 模式写成变量？ 不能，Vite 需要字面量完成静态分析。想读取 SVG 文本怎么办？ 用资源类型支持的 query: '?raw'，并确认处理该资源的配置。