使用 import.meta.glob 后引起的一系列问题（vue3 + vite）

1. 起因

• 想使用 vite 的批量导入模块的功能 import.meta.glob

2. 使用后报错

• 编译报错：仅当 “–module” 选项为 “es2020”、“es2022”、“esnext”、“system”、“node16” 或 “nodenext” 时，才允许使用 “import.meta” 元属性。
• 解决：在 tsconfig 中添加 "module": "es2020"。

3. 添加后又出现问题

• 问题：所有 import 导入的模块都开始爆红，提示“找不到模块XXX 或其对应的声明”
• 原因：ts 无法解析对应的内容
• 解决：tsconfig 中添加 include 选项

4. 继而又出现问题

• 问题：类型 ImportMeta 上不存在属性 glob
• 原因：import.meta 是 ES2020 新增内容，但是 glob 是 vite 才有的属性
• 解决：tsconfig 中添加 "types": ["vite/client"]

5. 示例代码

注意点：import.meta 是 ES2020新增的内容，但是 .glob 是 vite 才有的，所以在声明了使用 es2020 后还需要添加 “types”: [“vite/client”] 来添加对应的代码环境，让它编译的时候认识 vite 中才有的属性。

{
  "compilerOptions": {
    "module": "es2020", // 解决无法使用 import.meta
    "types": ["vite/client"], // 解决 .glob 报错，添加客户端代码环境
    "baseUrl": ".",
    "esModuleInterop": true,
    "paths": {
      "@/*": [
        "./views/*"
      ],
    },
    "lib": [ "dom", "es5", "es2015.promise" ,"es2015", "es2017","es2018","es2018.promise"],
    "jsx": "preserve",
    "downlevelIteration": true,
    "moduleResolution": "node",
  },
  "include": ["./xxx/**/*.ts", "./xxx/**/*.d.ts", "./xxx/**/*.tsx", "./xxx/**/*.vue"], // 解析各个文件，防止模块引入和模板使用爆红
}