前端工程化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 内置支持多环境文件，按以下命名创建即可：
