Vite中仅VITE_开头的变量可通过import.meta.env在前端访问，其他变量仅构建时可用；环境文件按优先级加载，.local文件不提交；自定义mode需匹配--mode参数。
在 Vite 中区分开发与生产环境的变量，核心是使用 .env 文件 + import.meta.env，但要注意：Vite **只将以 VITE_ 开头的变量暴露给客户端代码**，其他变量（如 NODE_ENV、API_BASE_URL）默认仅在构建时可用，不会被注入到前端运行时。
1. 环境变量文件命名与加载优先级
Vite 会按顺序加载以下文件（后加载的覆盖前一个同名变量）：
-
.env（所有环境通用） -
.env.local（所有环境通用，但不会提交到 Git，需加到.gitignore） -
.env.[mode]（例如.env.development、.env.production） -
.env.[mode].local（如.env.production.local，仅用于对应模式，不提交）
⚠️ 注意：.local 文件默认被 git 忽略，适合放敏感或本地配置；Vite 启动时只会加载与当前 --mode 匹配的文件（默认开发用 development，构建用 production）。
2. 正确声明前端可访问的环境变量
只有以 VITE_ 开头的变量才会被注入到 import.meta.env 中。例如：
立即学习“Java免费学习笔记（深入）”；
在 .env.development 中写：
VITE_API_BASE_URL=https://dev-api.example.com<br>VITE_APP_TITLE=我的开发版应用
在 .env.production 中写：
VITE_API_BASE_URL=https://api.example.com<br>VITE_APP_TITLE=我的正式版应用
然后在 JS 中直接使用：
console.log(import.meta.env.VITE_API_BASE_URL); // 自动根据 mode 切换<br>console.log(import.meta.env.VITE_APP_TITLE);
3. 非 VITE_ 变量只能在构建时使用（如 vite.config.ts）
比如你想在配置中读取数据库地址或构建版本号，但不想暴露给前端，可以这样写：
在 .env.production 中添加：
DB_HOST=10.0.1.5<br>BUILD_VERSION=2.3.1
在 vite.config.ts 中读取（注意：此时是 Node.js 运行时，不是浏览器）：
import { defineConfig } from 'vite'<br>export default defineConfig(({ mode }) => {<br> console.log('当前模式：', mode); // 'production' 或 'development'<br> console.log('DB_HOST:', process.env.DB_HOST); // ✅ 可读取<br> return { /* 配置 */ };<br>});⚠️ 这些变量 不会出现在 import.meta.env 中，前端无法访问，安全性更高。
4. 自定义 mode 并指定启动/构建命令
你可以定义自己的环境模式，比如 staging：
- 新建
.env.staging和.env.staging.local - 在
package.json中添加脚本："build:staging": "vite build --mode staging" - 启动时也支持：
vite --mode staging
这样 import.meta.env 就会加载 .env.staging 中的 VITE_* 变量。
不复杂但容易忽略：变量名必须带 VITE_ 前缀才能进前端，其他都只在 Node 端可用；环境文件名中的 mode 要和启动命令一致，否则不会加载。
