如何在Vite+TypeScript项目中使用.env环境变量？

1. 确认.env文件的位置与命名规则 #

• .env文件必须放在项目根目录（与package.json同级），不能放在src或其他子目录下。
• 变量名必须以VITE_开头，你的VITE_GIPHY_KEY符合规范，这部分无需调整。

2. 重启开发服务器 #

Vite仅在启动时加载.env文件，修改.env后必须重启npm run dev或yarn dev，否则新变量不会生效。

3. 配置TypeScript类型提示（可选但推荐） #

为让TypeScript识别import.meta.env的类型，在src目录下创建env.d.ts文件，添加以下内容：

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

interface ImportMetaEnv {
  readonly VITE_GIPHY_KEY: string;
  // 可添加其他自定义VITE_前缀变量
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

这样使用变量时会有类型提示，避免TS语法报错。

4. 检查多环境配置文件（若使用） #

如果用到.env.development、.env.production这类环境专属配置文件，要确认当前启动环境对应的文件中包含目标变量——Vite会优先加载对应环境的配置，覆盖.env中的同名变量。

5. 确认变量值格式 #

若变量值包含空格或特殊字符，需用引号包裹，例如：

VITE_GIPHY_KEY="abc dfg!@#"

按上述步骤排查后，重启开发服务器，console.log(import.meta.env.VITE_GIPHY_KEY)即可正常输出变量值。

内容的提问来源于stack exchange，提问作者Raúl Peñate