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