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"]
  }
}