1、环境认知：为什么需要多环境？开发、测试、预发布、生产环境的定义与区别
说实话，我刚入行那会儿也犯过迷糊。
本地跑得好好的代码，一上线就崩。查了半天，原来是数据库连接串写死了，连的是我本地的测试库。生产环境压根连不上。嗯，这种「我本地没问题啊」的经典场面，相信不少人都经历过。
为什么会这样？说白了，就是环境没分开。
1.1 为什么需要多环境？
你想想看，一个前端项目从开发到上线，要经历多少环节？
- 你本地写代码，需要频繁调试、热更新
- 测试同学要验证功能，不能被你改到一半的代码干扰
- 产品经理要看效果，但又不希望影响真实用户
- 最终上线，必须保证稳定、安全、高性能
这些需求，一个环境根本扛不住。我个人的习惯是：至少准备四套环境——开发、测试、预发布、生产。每一套环境都有它存在的意义。
核心原则：环境隔离 = 风险隔离。不同阶段的数据、配置、权限都不同，混在一起就是给自己埋雷。
1.2 开发环境（Development）
开发环境，说白了就是你的本地电脑。
我一般会在 package.json 里配一个 dev 命令，启动本地服务器，支持热更新、Source Map、Mock 数据。怎么方便怎么来。
// package.json
{
"scripts": {
"dev": "vite --mode development",
"build:test": "vite --mode test",
"build:staging": "vite --mode staging",
"build:prod": "vite --mode production"
}
}这里有个坑：开发环境不要用真实数据。我曾经见过一个同事，本地调试时直接连了生产数据库，结果一个不小心删了用户表……嗯，那天他加班到凌晨三点。
我的建议：开发环境用 Mock 数据或本地 JSON 文件。接口没写好？自己造数据。别图省事去连测试库，更别连生产库。
1.3 测试环境（Test / QA）
测试环境是给 QA 同学用的。
代码合并到 develop 分支后，CI/CD 会自动部署到测试环境。这里的数据是脱敏后的真实数据，接口也是真实的（但连的是测试数据库）。
我记得有一次，测试同学报了一个 Bug：「点击提交按钮后页面白屏」。我本地怎么都复现不了。后来发现，测试环境的接口返回格式跟本地 Mock 不一样——少了一个字段。这就是环境差异导致的典型问题。
注意：测试环境要尽量模拟生产环境。包括域名、HTTPS、CDN 配置等。越像生产，越能提前发现问题。
1.4 预发布环境（Staging / Pre-release）
预发布环境，很多人会忽略它。但我认为，这是最容易被低估的环境。
预发布环境跟生产环境几乎一模一样：同样的服务器配置、同样的数据库、同样的 CDN 策略。唯一的区别是——它不对外网开放。
为什么要多这一层？
- 验证部署脚本是否正确
- 检查环境变量是否生效
- 跑一遍冒烟测试
- 让产品经理最后确认效果
我曾经有一次，在预发布环境发现生产环境的 CDN 缓存策略配错了，导致静态资源加载慢了三秒。如果直接上线，那天的用户流失率估计要翻倍。
一句话总结：预发布环境是「生产环境的彩排」。所有上线前的操作，先在预发布走一遍。
1.5 生产环境（Production）
生产环境，就是用户真正在用的环境。
这里的要求只有一个：稳。不能随便改配置，不能随便升级依赖，不能随便加日志。所有变更都要走审批流程。
生产环境的配置通常包括：
| 配置项 | 开发环境 | 测试环境 | 预发布环境 | 生产环境 |
|---|---|---|---|---|
| API 地址 | localhost:3000 | test.api.example.com | staging.api.example.com | api.example.com |
| 日志级别 | debug | info | warn | error |
| Source Map | 开启 | 开启 | 关闭 | 关闭 |
| CDN | 无 | 测试 CDN | 生产 CDN（内网） | 生产 CDN |
避坑指南：千万不要在生产环境开启 Source Map。我曾经见过一个项目，Source Map 没关，用户直接通过浏览器 DevTools 看到了源码……嗯，那家公司后来被安全团队约谈了。
1.6 环境管理的核心原则
说了这么多，其实就三条原则：
- 配置外置：环境变量写在
.env文件里，不要硬编码在代码中 - 数据隔离：每个环境用不同的数据库、不同的存储桶
- 权限控制：生产环境的部署权限只给核心成员
我个人习惯用 dotenv 配合 cross-env 来管理环境变量。不同环境加载不同的 .env 文件，清晰又安全。
# .env.development
VITE_API_BASE_URL=http://localhost:3000
VITE_LOG_LEVEL=debug
# .env.production
VITE_API_BASE_URL=https://api.example.com
VITE_LOG_LEVEL=error一个小技巧：把 .env.production 加入 .gitignore，避免敏感信息泄露。生产环境的配置由 CI/CD 系统注入，而不是从代码仓库读取。
好了，这一章就聊到这儿。下一章我会讲讲如何用 Vite 和 Webpack 实现多环境配置，包括环境变量的注入、构建时的条件编译等。到时候我会分享一些我在实际项目中踩过的坑，保证有用。