Vite多环境打包变量配置核心是.env文件+--mode模式+VITE_前缀规则，原生支持、静态注入；需创建.env、.env.development等文件，变量以VITE_开头才注入import.meta.env，敏感信息不可放其中。

在 Vite 项目中配置多环境打包变量，核心是利用 .env 文件 + --mode 模式 + VITE_ 前缀规则，整个过程原生支持、无需插件，构建时静态注入，安全且轻量。

创建对应环境的 .env 文件

在项目根目录（与 package.json 同级）新建以下文件：

• .env：所有环境共用的基础变量（如 VITE_APP_TITLE=MyApp）
• .env.development：开发环境（vite 默认加载）
• .env.staging：预发环境（需显式指定 --mode staging）
• .env.production：生产环境（vite build 默认加载）
• .env.[mode].local（可选）：本地覆盖文件，不提交 Git，用于个人调试（如 .env.development.local）

变量必须以 VITE_ 开头才能被注入前端代码，例如：

VITE_API_BASE_URL=https://api.staging.example.com<br>VITE_ENABLE_MOCK=true

非 VITE_ 开头的变量（如 DB_PASSWORD）不会暴露，仅可在 vite.config.ts 中通过 loadEnv 读取。

立即学习“Java免费学习笔记（深入）”；

定义 package.json 脚本并指定 mode

在 scripts 中添加带 --mode 的命令，明确绑定环境：

Java Development Manual

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。 当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...

下载

"scripts": {<br>  "dev": "vite --mode development",<br>  "dev:staging": "vite --mode staging",<br>  "build": "vite build --mode production",<br>  "build:staging": "vite build --mode staging",<br>  "build:test": "vite build --mode test"<br>}

执行 npm run build:staging 时，Vite 自动加载 .env.staging 和 .env，并设置 import.meta.env.MODE === 'staging'。

在代码中安全使用环境变量

所有 VITE_ 变量都挂载在 import.meta.env 上，直接访问即可：

const apiBase = import.meta.env.VITE_API_BASE_URL;<br>const isMockEnabled = import.meta.env.VITE_ENABLE_MOCK === 'true';

注意：

• 值始终为字符串，布尔或数字需手动转换
• 不能在模板字符串中直接写 `${import.meta.env.VITE_X}`，会报错；应拆成两步：const val = import.meta.env.VITE_X; console.log(`${val}`)
• 敏感信息（密钥、密码）绝不可放在 VITE_ 变量里，它们会打包进前端产物

（可选）自定义变量前缀或运行时动态配置

如需统一用 APP_ 替代 VITE_，在 vite.config.ts 中配置：

export default defineConfig({<br>  envPrefix: 'APP_'<br>})

若需“一份包跑多环境”（即构建后仍能切换 API），需配合运行时请求 /config.js 或后端注入脚本，这已超出构建时变量范畴，属于部署层策略。