Vite 配置环境变量 import.meta.env 时出现 ts 错误

问题描述：

使用 Vite 2.x 构建项目时，在 .evn 文件中创建了自定义环境变量 VITE_BASE_URL

但在项目中使用时出现 Typescript 错误：

 

 

分析原因：

这是因为没有引入 ImportMeta 的类型声明文件，Vite 有提供 vite/client.d.ts 来做类型声明，在 tsconfig.json 中引入即可

 

 

解决方案：

在 tsconfig.json 中添加以下配置：

{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}

然后就能推断出自定义环境变量的类型为: string | boolean | undefined

如过可以确定这个变量为 string 类型，可以加类型断言 as string，但更合适的做法是创建新的类型声明文件 env.d.ts

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_BASE_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

可以将 env.d.ts 文件放到 src 目录下，无需再做别的配置，ts 就会引入这个文件

如果放到别的地方，比如根目录，就需要调整 tsconfig.json 的配置

{
  "compilerOptions": {
    "types": ["./env"]
  }
}