【多环境配置 Vue/Vite工程化】前端团队协作场景从环境定义到落地配置彻底搞懂dev/test/pre/prod区分规范避开线上环境踩坑 文章目录一、四个环境到底在干什么1.1 dev开发环境1.2 test测试环境1.3 pre预发 / 预生产环境1.4 prod生产环境二、为什么必须区分环境三、Vue 项目中如何配置多环境3.1 方案一Vue CLIcreate-vue / vue/cli3.2 方案二Vite 项目四、统一封装请求与接口切换五、常见踩坑与规范5.1 接口地址写死5.2 环境变量未生效5.3 生产环境开启 Source Map5.4 在代码中硬编码环境判断5.5 敏感信息进仓库5.6 预发和生产配置不一致六、环境区分速查表七、小结 系列模块导航 API 与异步请求规范 系列总览同学们好我是 Eugene尤金一名多年中后台前端开发工程师。Eugene 发音 /juːˈdʒiːn/大家怎么顺口怎么叫就好很多前端开发者都会遇到一个瓶颈代码能跑但不够规范功能能实现但维护起来特别痛苦一个人写没问题一到团队协作就各种混乱、踩坑、返工。想写出干净、优雅、可维护的专业代码靠的不是天赋而是体系化的规范 真实实战经验。这一系列《前端规范实战》我会用大白话 真实业务场景不讲玄学、不堆理论只分享能直接落地的规范、标准与避坑指南。帮你从「会写代码」真正升级为「会写优质、可维护、团队级别的代码」。工作几年后不少人依然对「开发环境」「测试环境」「预发环境」「生产环境」的概念和用法模糊甚至混用。配置不当往往导致接口打到生产、日志泄露敏感信息、调试代码上线等问题。一、四个环境到底在干什么先把几个概念说清楚。1.1 dev开发环境作用本地开发、联调、自测使用者前端/后端开发者特点本地或内网服务器有热更新、Source Map可随意打console.log接口指向开发/测试后端⬆ 返回目录1.2 test测试环境作用QA 测试、联调、验收使用者测试、产品、开发特点有独立域名如test.xxx.com接口指向测试后端数据以测试数据为主⬆ 返回目录1.3 pre预发 / 预生产环境作用上线前最后一次验证尽量贴近生产使用者测试、产品、少数开发特点和生产环境配置、后端、数据源尽量一致用生产配置验证逻辑一般没有真实用户流量⬆ 返回目录1.4 prod生产环境作用真实线上环境对外提供服务使用者真实用户特点关闭调试、Source Map 等接口必须是生产 API避免输出敏感信息注重稳定与安全⬆ 返回目录二、为什么必须区分环境问题类型不区分时的问题区分后的做法接口地址打包后默认打生产容易写死错环境按NODE_ENV等变量自动切换调试代码console.log、调试信息被带上线生产环境自动去掉或降级Source Map上线泄露源码生产不生成或只内网使用敏感配置API 密钥、内部域名泄露敏感信息只存在于对应环境变量⬆ 返回目录三、Vue 项目中如何配置多环境以 Vue CLI / Vite 两种常见方案说明。3.1 方案一Vue CLIcreate-vue / vue/cli约定用.env.[mode]区分环境例如.env # 所有环境共用 .env.development # 开发环境 .env.test # 测试环境 .env.pre # 预发环境 .env.production # 生产环境命名规则development对应npm run devproduction对应npm run buildtest、pre需要单独指定mode示例目录结构project/ ├── .env.development ├── .env.test ├── .env.pre ├── .env.production ├── vue.config.js └── src/.env.development# 开发环境 NODE_ENVdevelopment VUE_APP_BASE_APIhttp://dev-api.example.com VUE_APP_ENVdev VUE_APP_ENABLE_MOCKtrue.env.test# 测试环境 NODE_ENVproduction VUE_APP_BASE_APIhttps://test-api.example.com VUE_APP_ENVtest VUE_APP_ENABLE_MOCKfalse.env.pre# 预发环境尽量接近生产 NODE_ENVproduction VUE_APP_BASE_APIhttps://pre-api.example.com VUE_APP_ENVpre VUE_APP_ENABLE_MOCKfalse.env.production# 生产环境 NODE_ENVproduction VUE_APP_BASE_APIhttps://api.example.com VUE_APP_ENVprod VUE_APP_ENABLE_MOCKfalse说明Vue CLI 中只有以VUE_APP_开头的变量会暴露给前端代码NODE_ENV为development时启用热更新等开发特性test、pre一般也用NODE_ENVproduction做生产构建package.json 脚本{scripts:{dev:vue-cli-service serve,build:vue-cli-service build,build:test:vue-cli-service build --mode test,build:pre:vue-cli-service build --mode pre,build:prod:vue-cli-service build --mode production}}在代码中使用// src/api/request.jsconstbaseURLprocess.env.VUE_APP_BASE_APIconstisDevprocess.env.VUE_APP_ENVdev// 开发环境可以打印生产不打印if(isDev){console.log(当前环境:,process.env.VUE_APP_ENV)}⬆ 返回目录3.2 方案二Vite 项目Vite 用import.meta.env.MODE和.env.[mode]管理环境。示例目录结构project/ ├── .env ├── .env.development ├── .env.test ├── .env.pre ├── .env.production ├── vite.config.js └── src/.env.developmentNODE_ENVdevelopment VITE_BASE_APIhttp://dev-api.example.com VITE_APP_ENVdev VITE_ENABLE_MOCKtrue.env.productionNODE_ENVproduction VITE_BASE_APIhttps://api.example.com VITE_APP_ENVprod VITE_ENABLE_MOCKfalse说明Vite 只暴露以VITE_开头的变量不要用VUE_APP_在 Vite 中无效vite.config.js 配置 modeimport{defineConfig}fromviteimportvuefromvitejs/plugin-vueexportdefaultdefineConfig(({mode})({plugins:[vue()],// 根据 mode 决定是否生成 sourcemapbuild:{sourcemap:modedevelopment,minify:modeproduction,},}))package.json 脚本{scripts:{dev:vite,build:vite build,build:test:vite build --mode test,build:pre:vite build --mode pre,build:prod:vite build --mode production}}在代码中使用// src/api/request.jsconstbaseURLimport.meta.env.VITE_BASE_APIconstisDevimport.meta.env.VITE_APP_ENVdev⬆ 返回目录四、统一封装请求与接口切换下面是一个统一的请求封装示例展示如何根据环境切换接口和日志行为。// src/utils/request.js// 根据框架选择constbaseURLprocess.env.VUE_APP_BASE_API||import.meta.env.VITE_BASE_APIconstenvprocess.env.VUE_APP_ENV||import.meta.env.VITE_APP_ENVconstisProd[prod,pre].includes(env)// 创建 axios 实例constrequestaxios.create({baseURL,timeout:15000,})// 请求拦截器request.interceptors.request.use((config){// 生产/预发环境不打印完整请求信息if(!isProd){console.log([${env}] 请求:,config.url,config.params||config.data)}returnconfig},(err)Promise.reject(err))// 响应拦截器request.interceptors.response.use((res){if(!isProdres.config?.url){console.log([${env}] 响应:,res.config.url,res.data)}returnres.data},(err){// 生产环境不把详细错误堆栈暴露给用户if(isProd){console.error(请求失败)// 可接入监控}else{console.error(请求失败:,err.message,err.response)}returnPromise.reject(err)})exportdefaultrequest要点使用环境变量统一管理baseURL生产/预发不打印详细请求、响应和堆栈可在isProd分支接入埋点、监控⬆ 返回目录五、常见踩坑与规范5.1 接口地址写死错误示例// 千万别这样axios.get(https://api.example.com/user/list)正确做法constbaseURLprocess.env.VUE_APP_BASE_APIaxios.get(${baseURL}/user/list)⬆ 返回目录5.2 环境变量未生效Vue CLI必须使用VUE_APP_前缀Vite必须使用VITE_前缀修改.env后需重启 dev 或重新 build⬆ 返回目录5.3 生产环境开启 Source Map生产包若带完整 Source Map源码易被还原存在泄露风险。// vite.config.jsexportdefaultdefineConfig(({mode})({build:{sourcemap:mode!production,// 仅非生产生成// 或生产环境用 hidden只给监控用// sourcemap: mode production ? hidden : true,},}))⬆ 返回目录5.4 在代码中硬编码环境判断不推荐if(window.location.hostnametest.xxx.com){baseURLhttps://test-api.xxx.com}推荐统一用.envVUE_APP_*/VITE_*构建时注入避免运行时依赖域名。⬆ 返回目录5.5 敏感信息进仓库.env、.env.local等若含密钥应加入.gitignore生产环境密钥建议用 CI/CD 注入而不是提交到仓库⬆ 返回目录5.6 预发和生产配置不一致预发环境的价值在于「和生产一致」。若预发和生产使用不同 API 或配置容易漏掉线上问题建议预发和生产使用相同接口规范、鉴权方式仅域名、部分开关等可配置差异⬆ 返回目录六、环境区分速查表环境典型命令用途接口示例devnpm run dev本地开发http://dev-api.xxxtestnpm run build:test测试验收https://test-api.xxxprenpm run build:pre上线前验证https://pre-api.xxxprodnpm run build:prod正式上线https://api.xxx⬆ 返回目录七、小结dev本地开发自由调试test测试与联调pre贴近生产的最终验证prod正式对外环境实践上用.env.[mode] 环境变量统一管理接口和开关不在代码中写死 API、密钥、环境判断生产环境关闭 Source Map、控制日志输出敏感配置不进仓库通过 CI/CD 注入按以上规范配置能明显减少「打到错误环境」「调试代码上线」「配置泄露」等问题把环境区分清楚是工程化与协作的基础一步。⬆ 返回目录 系列模块导航 工程化与协作规范一、《Vite 工程化实战alias/env/proxy/ 打包配置全解析统一项目规范避坑工程化与协作规范篇》二、《前端多环境配置规范dev/test/pre/prod 环境差异与配置避免生产环境踩坑工程化与协作规范篇》三、《前端 Git 协作规范实战commit message 分支管理 合并流程告别冲突与混乱工程化与协作规范篇》四、《ESLint Prettier 实战统一前端代码风格自动修复语法格式问题工程化与协作规范篇》五、《Element Plus/VXE-Table UI 组件库规范统一用法实战避开样式冲突与维护混乱工程化与协作规范篇》 跟着系列慢慢学把技术功底扎扎实实地打牢 系列总览前端体系化学习完全体基础 → 规范 → 架构 → 大厂面试四套系列、百余篇高质量实战文从入门到进阶一站式补齐前端核心能力前端基础实战系列 《前端基础实战JS/TS与Vue体系化扫盲47 篇完整目录 避坑》前端规范实战系列 《JS/TS/Vue 前端规范实战从写对到写优搞定中后台规范落地打造可维护代码40 篇全目录》前端架构实战系列聚焦工程化、性能优化、可维护架构、中后台体系设计持续更新中前端大厂面试系列覆盖高频考点、手写题、项目深挖、简历与面试技巧规划中每个系列完结后都会整理成一篇完整导航文并附上直达链接方便大家按顺序、体系化学习。全套内容持续更新中敬请期待⬆ 返回目录技术成长从来不是比谁写得快而是比谁写得稳、规范、可维护。哪怕每次只吃透一条规范长期下来差距会非常明显。后续我会持续更新前端规范、工程化、可维护代码相关实战干货帮你告别面条代码、维护噩梦在开发与面试中更有底气。觉得有用欢迎点赞 收藏 关注不错过每一篇实战内容。我是 Eugene与你一起写规范、写优质代码我们下篇干货见