import.meta.glob 通配符详解（* 和** ）

1. ‌ *（单星号） ‌

• ‌含义‌：匹配 ‌单层目录‌ 中的任意文件名或目录名（不包含路径分隔符 /）。

• ‌示例‌：

  // 匹配当前目录下所有 .vue 文件，但不包括子目录
  const components = import.meta.glob('./*.vue', { eager: true });
  

  • 匹配路径：./Header.vue ✅
  • 不匹配路径：./components/Button.vue ❌

2. ‌ **（双星号）

• ‌含义‌：匹配 ‌任意层级的子目录‌（递归匹配）。

• ‌示例‌：

  // 匹配当前目录及所有子目录下的 .vue 文件
  const components = import.meta.glob('./**/*.vue', { eager: true });
  

  • 匹配路径：

    • ./Header.vue ✅
    • ./components/Button.vue ✅
    • ./components/Form/Input.vue ✅
    • ./nested/dir/Modal.vue ✅

3. ‌组合模式 ./**/*.vue 的解析

• ./：从当前目录开始扫描。
• **：递归所有子目录。
• *.vue：在每一层目录中匹配以 .vue 结尾的文件。

4. ‌实际路径匹配示例‌

假设项目目录结构如下：

src/
├─ components/
│  ├─ Button.vue          --> 匹配 ✅
│  └─ Form/
│     ├─ Input.vue        --> 匹配 ✅
│     └─ index.vue        --> 匹配 ✅
├─ Header.vue             --> 匹配 ✅
└─ layouts/
   └─ MainLayout.vue      --> 匹配 ✅

通过 ./**/*.vue 会匹配到所有 .vue 文件，包括嵌套的子目录。

5. ‌特殊场景说明‌

• ‌忽略 index.vue 的场景‌：
  如果路径是 ./components/Form/index.vue，默认会被匹配到。如果需要忽略 index.vue，可以调整模式为：

  // 排除文件名是 index.vue 的文件
  const components = import.meta.glob('./**/!(*index).vue', { eager: true });
  

• ‌精确匹配单层目录‌：
  若只需要匹配 components 目录下的文件（不递归子目录），可以写成：

  const components = import.meta.glob('./components/*.vue', { eager: true });
  

总结

• *：单层目录的通配符（不递归子目录）。
• **：多层目录的通配符（递归匹配所有子目录）。
• ./**/*.vue 是 Vite 中常用的 ‌递归匹配所有 Vue 文件 的语法。