在代码中访问环境变量

Vite 将 VITE_ 前缀的环境变量注入到 import.meta.env 对象中供代码使用。

访问方式

// 访问环境变量
const apiUrl = import.meta.env.VITE_API_URL
const appTitle = import.meta.env.VITE_APP_TITLE
const debug = import.meta.env.VITE_DEBUG

内置变量

Vite 提供一些内置环境变量：

在 TypeScript 中使用

添加类型声明：

// vite-env.d.ts
interface ImportMetaEnv {
  readonly VITE_API_URL: string
  readonly VITE_APP_TITLE: string
  readonly VITE_DEBUG: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

在 HTML 中使用

<title>%VITE_APP_TITLE%</title>

<link rel="icon" href="%BASE_URL%/favicon.ico" />

注意：HTML 中使用 %变量名% 格式，构建时会被替换。

动态访问变量

// 静态访问（推荐）
const apiUrl = import.meta.env.VITE_API_URL

// 动态访问（不支持）
const key = 'VITE_API_URL'
const value = import.meta.env[key]  // ✗ 无法动态访问

判断环境

if (import.meta.env.DEV) {
  console.log('开发环境')
}

if (import.meta.env.PROD) {
  console.log('生产环境')
}

要点总结

• 通过 import.meta.env 访问变量
• 内置 MODE、BASE_URL、DEV、PROD 等
• TypeScript 需添加类型声明
• HTML 使用 %变量名% 格式替换