vite + typescript 多环境打包靠环境变量文件、模式和 import.meta.env 实现，无需插件；变量须以 vite_ 开头才能注入客户端，按 .env.[mode] 优先级加载，并通过 env.d.ts 补全类型，构建时静态替换无运行时开销。
Vite + TypeScript 项目中实现多环境打包区分，核心是靠环境变量文件 + 模式（mode） + import.meta.env 访问机制。整个流程不依赖额外插件，Vite 原生支持，关键在于命名规则、文件位置、加载优先级和 TypeScript 类型提示补全。
✅ 环境变量必须以 VITE_ 开头才能被客户端访问
Vite 默认只将 VITE_* 开头的变量注入到 import.meta.env 中，其他变量（如 API_KEY、DB_URL）会被完全忽略，不会出现在构建产物里——这是安全设计，防止敏感信息泄露。
# .env.development（开发环境） VITE_API_BASE=https://dev-api.example.com VITE_APP_NAME="MyApp Dev" VITE_ENABLE_MOCK=true
# .env.production（生产环境） VITE_API_BASE=https://api.example.com VITE_APP_NAME="MyApp Pro" VITE_ENABLE_MOCK=false
# .env.test（测试环境，需手动指定 mode） VITE_API_BASE=https://test-api.example.com VITE_LOG_LEVEL="warn"
⚠️ 注意：
.env.local文件默认被.gitignore排除，适合放本地密钥或个性化配置（如VITE_SECRET_TOKEN=xxx），但依然要以VITE_开头才生效。
✅ 按模式（mode）加载对应环境文件
Vite 启动或构建时通过 --mode xxx 指定模式，默认：
-
vite→mode=development -
vite build→mode=production
你可以在 package.json 中自定义脚本：
{
"scripts": {
"dev": "vite",
"build": "vite build",
"build:prod": "vite build --mode production",
"build:test": "vite build --mode test",
"build:staging": "vite build --mode staging"
}
}
对应需创建：
.env.test.env.staging-
.env.staging.local（本地覆盖，不提交）
加载顺序（高优先级 → 低优先级，后加载的同名变量会覆盖前面的）：
.env.[mode].local.env.[mode].env.local.env
✅ 在 TypeScript 中安全使用环境变量（类型提示 + 运行时校验）
Vite 不会自动为 import.meta.env 提供完整类型，但可通过声明合并补全：
在 src/env.d.ts（新建）中添加：
/// <reference types="vite/client"></reference>
interface ImportMetaEnv {
readonly VITE_API_BASE: string;
readonly VITE_APP_NAME: string;
readonly VITE_ENABLE_MOCK: string; // 注意：值始终是字符串！
readonly VITE_LOG_LEVEL?: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
✅ 这样写代码时就有类型提示和编译检查：
const apiBase = import.meta.env.VITE_API_BASE; // ✅ 字符串类型，TS 可推导 const isMockEnabled = import.meta.env.VITE_ENABLE_MOCK === 'true'; // ✅ 安全比较
⚠️ 注意：所有环境变量值都是字符串，即使你写 VITE_ENABLE_MOCK=true，取出来也是 'true'，需手动转布尔。
✅ 高级配置：自定义前缀或多个前缀（可选）
如果团队规范要求用 APP_ 或 MY_ 开头，可在 vite.config.ts 中修改：
import { defineConfig } from 'vite';
export default defineConfig({
envPrefix: ['VITE_', 'APP_', 'MY_'], // 支持多个前缀
});
然后 .env 中可以写：
APP_THEME=dark MY_API_TIMEOUT=5000 VITE_API_BASE=https://api.example.com
它们都会出现在 import.meta.env 中。
✅ 构建时静态替换，零运行时开销
Vite 在构建阶段就把 import.meta.env.xxx 替换成实际字符串字面量，例如：
console.log(import.meta.env.VITE_APP_NAME);
// 构建后变成 → console.log("MyApp Pro");
这意味着：
- 没有运行时读取
.env的开销 - Tree-shaking 能识别死代码（比如
if (import.meta.env.PROD) { ... }中的非 PROD 分支会被删掉） - 安全性高，变量不会“动态泄露”
不复杂但容易忽略
