Vite通过VITE_前缀变量和.env.[mode]文件实现环境变量管理，loadEnv用于服务端配置，自定义envDir/envPrefix可调整路径与前缀。
直接在项目根目录创建对应文件，再通过命令指定模式，就能让 Vite 自动加载环境变量。关键不是写多少配置，而是理解加载顺序和命名规则。
环境变量必须以 VITE_ 开头
Vite 只会把以 VITE_ 为前缀的变量注入到 import.meta.env 中，其他变量（比如 DB_PASSWORD 或 SECRET_KEY）根本不会出现在客户端代码里，这是硬性安全限制。
- ✅ 正确写法：
VITE_API_BASE_URL=https://api.example.com - ✅ 可读取：
console.log(import.meta.env.VITE_API_BASE_URL) - ❌ 错误写法：
API_BASE_URL=https://api.example.com→ 客户端访问不到 - ❌ 动态访问无效：
const key = 'VITE_API_BASE_URL'; console.log(import.meta.env[key])→ 构建时无法静态替换，会是undefined
多环境靠 .env.[mode] 文件 + --mode 参数
Vite 不依赖 webpack 那套复杂插件链，而是靠文件名约定和命令行参数联动。你只需要：
- 在项目根目录新建
.env.development、.env.production、.env.staging等文件 - 每个文件里只写
VITE_开头的变量，比如：VITE_APP_TITLE=我的应用(预发布)VITE_API_BASE_URL=https://staging-api.example.com - 在
package.json的 scripts 里加对应命令："dev:staging": "vite --mode staging""build:staging": "vite build --mode staging"
运行 npm run dev:staging 时，Vite 就会优先加载 .env.staging 和 .env.staging.local（如果存在），再回退到 .env。
立即学习“Java免费学习笔记（深入）”；
vite.config.ts 里用 loadEnv 提前读取变量
有些配置（比如 base、server.proxy）需要在 Vite 启动前就确定，不能等 import.meta.env —— 因为它只在浏览器里可用。这时要用 Vite 提供的 loadEnv 函数：
- 在
vite.config.ts开头导入：import { defineConfig, loadEnv } from 'vite' - 导出函数形式配置：
export default defineConfig(({ mode }) => { - 调用
const env = loadEnv(mode, process.cwd(), '')，得到一个纯 JS 对象 - 然后就可以用
env.VITE_BASE_URL去设置base、server.port等服务端配置项
可选：自定义 envDir 或前缀
如果不想把所有 .env 文件堆在根目录，可以在配置里指定位置：
-
envDir: './config/env'→ Vite 就去这个文件夹找.env.[mode] -
envPrefix: 'APP_'→ 就能用APP_TITLE替代VITE_TITLE，但注意仍需前缀才暴露
不复杂但容易忽略
