前端工程化15：前端环境变量配置：开发/测试/生产环境一键切换文章目录前端工程化15：前端环境变量配置：开发/测试/生产环境一键切换前言一、环境变量核心概念1. 什么是环境变量？2. 为什么要区分环境？二、Vite 项目多环境变量配置1. 环境文件约定2. 编写环境变量3. 在代码中使用环境变量4. 配置打包脚本三、Webpack 项目多环境变量配置1. 安装依赖2. 创建环境文件3. 在 Webpack 配置中注入变量4. 配置脚本命令5. 在代码中使用环境变量四、企业级环境变量规范1. 敏感配置不要写在环境文件里2. 环境变量命名统一规范3. 环境文件添加到 `.gitignore`五、常见问题与解决1. 环境变量不生效2. 生产环境还在打印日志文末总结前言在企业项目开发中，我们通常会面临多环境部署的场景：开发环境、测试环境、预发布环境、生产环境，每个环境的接口地址、第三方配置、功能开关都不一样。很多新手的做法是写死地址，上线前手动修改，结果导致本地正常、线上报错，甚至直接上线了测试环境地址，造成线上事故。本篇手把手教你在 Webpack 和 Vite 项目中，实现多环境变量自动区分、一键切换，彻底解决环境配置混乱问题。一、环境变量核心概念1. 什么是环境变量？是项目运行时的全局变量，用来区分当前项目所处的环境（开发/测试/生产）所有和环境相关的配置（接口地址、日志开关、埋点配置），都应该通过环境变量来控制环境变量只在打包/运行阶段生效，不会被硬编码进业务代码中2. 为什么要区分环境？避免手动修改地址导致线上事故不同环境开启/关闭不同功能（比如开发环境开启日志，生产环境关闭）支持自动化CI/CD流水线，自动打包对应环境的代码二、Vite 项目多环境变量配置1. 环境文件约定Vite 内置支持多环境文件，按以下命名创建即可：