⚡ 多环境配置 · 发布实战

01

环境认知 基础

为什么需要多环境？开发、测试、预发布、生产环境的定义与区别。

02

环境变量基础 Node.js

process.env，.env 文件规范与 dotenv 库的使用。

03

Vite 环境配置 Vite

.env.development、.env.production，import.meta.env 使用。

04

Webpack 环境配置 Webpack

DefinePlugin & mode，cross-env 跨平台设置。

05

React 项目实战 CRA

Create React App 中配置 REACT_APP_* 环境变量。

06

Vue 项目实战 Vue CLI

.env 文件与 VUE_APP_* 前缀规则。

07

构建脚本设计 scripts

package.json scripts 配置，npm run build:dev / build:prod。

08

API 接口管理 axios

根据环境切换 baseURL，axios 实例动态配置。

09

代理配置 DevServer

开发环境 proxy 配置（Vite & Webpack DevServer）。

10

日志与调试 console

不同环境 console.log 控制，生产移除调试代码。

11

Source Map 策略 source-map

开发开启 source-map，生产关闭或 hidden-source-map。

12

CDN 资源管理 CDN

根据环境切换 CDN 域名，资源路径动态拼接。

13

打包优化 优化

生产环境代码压缩、Tree Shaking、分包策略。

14

CI/CD 入门 CI

GitHub Actions / GitLab CI 概念与配置文件结构。

15

CI 环境变量 Secrets

GitHub Secrets / GitLab Variables 管理敏感信息。

16

自动化构建 CI/CD

npm install、npm run build，产物上传至服务器或 OSS。

17

Docker 化部署 Docker

编写 Dockerfile，多阶段构建，环境变量注入容器。

18

Nginx 配置 Nginx

根据环境配置 location、反向代理、缓存策略。

19

Kubernetes 基础 K8s

Pod、Deployment、Service，ConfigMap & Secret 管理变量。

20

蓝绿部署 部署

概念与实现，通过负载均衡切换流量。

21

灰度发布 灰度

基于 Cookie/Header 灰度策略，前端路由级别灰度。

22

版本回滚 回滚

前端静态资源版本管理，CDN 缓存刷新与回滚方案。

23

监控与报警 Sentry

Sentry / 前端埋点，不同环境上报不同 DSN。

24

权限控制 权限

根据环境展示不同功能按钮，权限路由动态加载。

25

国际化配置 i18n

根据环境加载不同语言包，i18n 与环境变量结合。

26

Mock 数据 Mock

开发环境 mockjs，测试环境使用真实接口。

27

多环境测试 E2E

Cypress/Playwright 中切换环境配置。

28

配置文件模板 config

创建 config 目录，导出不同环境配置对象。

29

团队协作规范 规范

.env.example 文件，环境变量文档化，Git 忽略 .env。

30

全流程实战 🚀 终极

从零搭建多环境前端项目，包含 CI/CD 完整流水线。