TypeScript项目中Vite多环境变量配置需结合.env文件约定、loadEnv函数和类型定义，通过--mode参数加载对应文件，仅VITE_前缀变量注入import.meta.env，并在env.d.ts中定义接口确保类型安全。
在 TypeScript 项目中使用 Vite 配置多环境变量，核心是结合 .env 文件约定、loadEnv 工具函数和类型安全定义。它不是靠“自动扫描”，而是由 Vite 启动时根据 --mode 参数明确加载对应文件，并通过 import.meta.env 在运行时访问。
环境变量文件命名与加载规则
Vite 按固定优先级从项目根目录读取 .env 类文件，只加载匹配当前 mode 的文件：
-
.env.[mode].local（如.env.production.local）→ 优先级最高，本地覆盖，通常加到.gitignore -
.env.[mode]（如.env.staging）→ 模式专属配置，可提交到仓库 -
.env.local→ 所有模式都加载，用于通用本地设置（如本地代理端口） -
.env→ 全局默认值，所有模式兜底
例如执行 vite --mode staging，Vite 会依次加载：.env.staging.local → .env.staging → .env.local → .env，同名变量后加载的覆盖前一个。
确保变量能被客户端读取的关键前缀
Vite 默认只把以 VITE_ 开头的变量注入到 import.meta.env 中：
- ✅
VITE_API_BASE=https://api.dev.example.com→ 可用import.meta.env.VITE_API_BASE - ❌
DB_PASSWORD=secret123→ 完全不会出现在客户端代码里，保障安全
如果团队已有命名规范（比如沿用 REACT_APP_），可在 vite.config.ts 中自定义前缀：
export default defineConfig({<br> envPrefix: ['VITE_', 'REACT_APP_'],<br>});
这样 REACT_APP_TITLE=MyApp 也会被注入为 import.meta.env.REACT_APP_TITLE。
在 TypeScript 中安全读取并类型化
直接访问 import.meta.env.XXX 是字符串类型，需手动转换；推荐在 types/env.d.ts 中补充接口定义：
interface ImportMetaEnv {<br> readonly VITE_API_URL: string;<br> readonly VITE_PORT: number;<br> readonly VITE_ENABLE_LOG: boolean;<br>}
然后在配置文件中做类型转换：
import { defineConfig, loadEnv } from 'vite';<br>import vue from '@vitejs/plugin-vue';<br><br>export default defineConfig(({ mode }) => {<br> const env = loadEnv(mode, process.cwd());<br> return {<br> plugins: [vue()],<br> server: {<br> port: Number(env.VITE_PORT) || 3000,<br> open: true,<br> },<br> define: {<br> __APP_ENV__: JSON.stringify({<br> apiURL: env.VITE_API_URL,<br> enableLog: env.VITE_ENABLE_LOG === 'true',<br> }),<br> },<br> };<br>});
注意：构建时变量会被静态替换，不能用动态 key 访问（如 import.meta.env[myKey] 会失效）。
启动命令与模式绑定
在 package.json 中定义不同模式的脚本，让开发/构建行为清晰可区分：
"scripts": {<br> "dev": "vite",<br> "dev:staging": "vite --mode staging",<br> "build": "vite build",<br> "build:prod": "vite build --mode production",<br> "build:staging": "vite build --mode staging"<br>}
执行 npm run dev:staging 时，Vite 自动加载 .env.staging 和 .env.staging.local，import.meta.env.MODE 值为 "staging"，可用于条件逻辑。
