vue项目多环境支持需规范定义环境变量并构建时精准注入：vite用vite_前缀、vue cli用vue_app_前缀暴露变量；按.env.[mode].local→.env.[mode]→.env.local→.env优先级加载配置；通过--mode指定环境，统一管理api、路由及资源路径。
Vue 项目要支持开发、测试、预发布、生产等不同阶段，关键在于环境变量的规范定义和构建时的精准注入。Vite（Vue3主流构建工具）和 Vue CLI（Vue2/部分Vue3项目）都提供成熟机制，但核心逻辑一致：按模式加载配置文件、构建时静态替换、客户端仅暴露安全前缀变量。
环境变量命名与暴露规则
Vite 默认只将 VITE_ 开头的变量注入到客户端代码中，比如 VITE_API_BASE_URL 可在组件里直接用 import.meta.env.VITE_API_BASE_URL 访问；而 DB_PASSWORD 或 SECRET_KEY 这类敏感变量不会出现在最终打包产物里，天然规避泄漏风险。
- 如需自定义前缀（例如统一用
APP_），可在vite.config.ts中设置envPrefix: "APP_" - Vue CLI 使用
VUE_APP_前缀，同样只暴露该前缀变量，且通过process.env.VUE_APP_XXX访问 - 所有非前缀变量（如
NODE_ENV、BASE_URL）由构建工具内部使用，不建议手动覆盖
多环境配置文件结构
项目根目录下按优先级顺序创建以下文件，同名变量以高优先级文件为准：
-
.env.[mode].local：如.env.development.local，存放本地调试用配置（如个人 mock 接口地址），必须加入.gitignore -
.env.[mode]：如.env.staging，对应预发布环境的标准配置，提交至代码库 -
.env.local：通用本地覆盖，适用于所有模式，也应被 git 忽略 -
.env：全局默认值，比如VITE_APP_TITLE=我的系统，所有环境兜底使用
典型示例：.env.production 中设 VITE_APP_BASE_API=https://api.example.com，而 .env.development 中为 VITE_APP_BASE_API=http://localhost:8080/api，构建时自动生效。
构建命令与环境绑定
运行时通过 --mode 指定环境，触发对应配置加载：
- Vite 项目：执行
npm run build -- --mode staging，自动读取.env.staging和.env - Vue CLI 项目：在
package.json中添加脚本"build:staging": "vue-cli-service build --mode staging" - 可配合
vite.config.ts中的loadEnv(mode, root)提前读取并参与配置，例如动态设置server.proxy或base
API 与资源路径的统一管理
避免硬编码路径，把路由基础路径、静态资源路径、API 基础地址全部交由环境变量控制：
-
VITE_APP_BASE_URL→ 传给router.createWebHistory()的参数 -
VITE_PUBLIC_PATH→ vite 配置中的base字段，决定index.html中资源引用前缀 -
VITE_APP_API_BASE_URL→ axios 实例的baseURL，前端请求自动拼接
例如部署到子路径 /admin/ 时，只需修改 .env.production 中的两个变量，无需改动任何源码或 Nginx 配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
