vite通过.env文件和loadenv函数实现环境变量加载与多环境配置,核心是“文件约定+模式匹配+显式读取”;需遵守vite_前缀规则、加载优先级(.env→.env.local→.env.[mode]→.env.[mode].local)及loadenv显式读取服务端配置。

Vite 通过 .env 文件和 loadEnv 函数实现环境变量加载与多环境配置,核心是“文件约定 + 模式匹配 + 显式读取”。不需要手动解析,但必须遵守前缀规则和加载时机。
环境变量文件命名与加载规则
Vite 使用 dotenv 自动加载项目根目录下的特定文件,按固定优先级覆盖:
-
.env:所有模式都加载,作为默认值 -
.env.local:所有模式都加载,但应被.gitignore忽略(本地调试专用) -
.env.[mode]:仅在指定模式(如production、staging)下加载 -
.env.[mode].local:仅在对应模式下加载,且被.gitignore忽略(最高效覆盖层)
加载顺序从低到高:.env → .env.local → .env.[mode] → .env.[mode].local。同名变量后加载的会覆盖前面的。
变量必须以 VITE_ 开头才能暴露给客户端
只有带 VITE_ 前缀的变量才会注入到 import.meta.env 中供前端代码使用:
- ✅ 正确:
VITE_API_BASE_URL=https://api.example.com→ 可在组件中写import.meta.env.VITE_API_BASE_URL - ❌ 无效:
API_KEY=xxx或SECRET_TOKEN=yyy→ 不会被打包进客户端,也不会出现在import.meta.env中
如需自定义前缀,可在 vite.config.ts 中设置:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
此时 APP_TITLE 就会变成 import.meta.env.APP_TITLE。
在 vite.config.ts 中读取并使用环境变量
服务端配置(如端口、代理、别名)不能直接用 import.meta.env,需用 Vite 提供的 loadEnv 函数显式加载:
- 函数签名:
loadEnv(mode: string, envDir: string, prefix: string | string[] = 'VITE_') - 通常搭配 defineConfig 的参数解构使用,
mode即当前命令触发的模式(serve对应development,build默认为production)
示例:
import { defineConfig, loadEnv } from 'vite'export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd())
return {
server: { port: Number(env.VITE_PORT) || 3000 },
define: { __APP_VERSION__: JSON.stringify(env.VITE_APP_VERSION) }
}
})
启动不同环境的命令写法
通过 --mode 指定模式,Vite 会自动加载对应 .env.[mode] 文件:
-
vite --mode development→ 加载.env.development -
vite build --mode staging→ 加载.env.staging和.env.staging.local -
VITE_DEBUG=true vite build→ 环境变量优先级最高,直接覆盖所有.env文件中的VITE_DEBUG
推荐在 package.json 中预设脚本:
"dev": "vite",
"build:prod": "vite build --mode production",
"build:staging": "vite build --mode staging",
"dev:test": "vite --mode test"
}
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










