跳到主要内容

Vite 读取环境变量

在 vite.config.ts 中读取 .env 定义的变量

方案一: loadEnv 函数 (vite 包提供的方法)​

const env = loadEnv(mode, process.cwd());

默认只会读取到以 VITE_ 开头的变量, 如果需要读取到指定前缀的变量, 第三个参数传 'prefix', prefix 的默认值是 VITE_

function loadEnv(mode, envDir, (prefixes = "VITE_")){
  // ...
};

在客户端代码中访问环境变量需要使用 import.meta.env.VITE_XXXX

需要在 tsconfig.json 中引用 Vite 的类型

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

import.meta.env 内置变量

  • import.meta.env.MODE
  • import.meta.env.BASE_URL
  • import.meta.env.PROD
  • import.meta.env.DEV
  • import.meta.env.SSR
  • import.meta.env 自定义变量需要以 VITE_ 开头

方案二: dotenv​

import dotenv from 'dotenv'
// 手动加载 .env 文件
dotenv.config()


console.log(process.env.VITE_PORT)

import.meta.env 和 process.env 的区别​

  1. import.meta.env
  • vite 提供的
  • 在客服端使用(浏览器)
  • 数据源是 .env 文件(Vite 处理之后的 .env 文件)
  • 变量名需要以 VITE_ 开头
  • 构建时静态替换
  1. process.env
  • nodejs 全局对象
  • 在服务端使用(需要nodejs环境)
  • 数据源是操作系统环境变量,(需要 dotenv.config() 才能取到 .env 文件的变量)
  • 变量名无要求
  • 运行时读取

Vite 对 .env 文件的处理​

加载顺序(优先级从低到高)​

  1. .env
  2. .env.local
  3. .env.[mode]
  4. .env.[mode].local

解析处理​

使用 dotenv, dotenv-expand 来解析 .env 文件

  1. 变量引用（使用 $VAR 或 ${VAR}）
VITE_APP_TITLE=$APP_NAME
VITE_FULL_URL=${BASE_URL}/api
VITE_INFO=${APP_NAME} is running in ${APP_ENV}
  1. 默认值（如果变量不存在）
VITE_PORT=${PORT:-3000}
VITE_HOST=${HOST:-localhost}
  1. 多行值（使用引号）
VITE_DESCRIPTION="This is a
multi-line
description"
  1. 特殊字符
VITE_SPECIAL="Value with spaces"
VITE_QUOTE='Single "quoted" value'
  1. 注释
# 这是注释
VITE_API_KEY=abc123  # 行尾注释

3. 前缀处理​

只会暴露指定前缀的变量

4. 静态替换(构建时)​

将 import.meta.env.* 静态替换

5. 注入内置变量​

如 MODE, DEV, PROD 等

6. 构建优化​

tree-shaking (摇树), 移除未使用的变量

最后于 更新