核心是配置分离与自动化部署：通过构建时注入（如vite的--mode）、环境变量加载、产物标识区分、ci/cd按分支/标签自动触发构建部署，并实现基础设施（k8s命名空间、nginx配置、cdn路径）的环境隔离。
核心是把环境差异从代码里抽出来，用构建时注入或运行时加载的方式统一管理，再配合CI/CD流水线自动触发对应流程。
配置分离：环境变量 + 构建模式
不写死API地址、开关、域名等，而是通过构建工具动态替换：
- Vite项目用vite build --mode production，在vite.config.js中根据mode注入不同define值
- Webpack项目用--env=production参数，配合DefinePlugin定义全局常量
- React/Vue项目可封装config.js，按process.env.NODE_ENV或自定义REACT_APP_ENV读取对应配置对象
构建产物区分：输出目录 + 文件标记
避免不同环境包混用，构建结果要自带身份标识：
- 开发环境：输出到dist-dev，带-dev后缀的JS/CSS文件名
- 测试环境：生成dist-test，并在HTML中插入data-env="test"便于监控识别
- 生产环境：固定输出dist，启用压缩、SourceMap分离、子资源完整性（SRI）校验
CI/CD流水线：按分支或标签触发不同部署
用一个配置文件驱动全链路，不用手动选环境：
- GitHub Actions中，push to dev-branch → 运行npm run build:dev → 部署到开发服务器
- push tag v1.2.0 → 执行npm run build:prod → 推送镜像到仓库 + 更新K8s生产Deployment
- 测试环境可设为PR合并后自动部署，加一道cypress run --env ENV=test端到端验证
基础设施隔离：命名空间 + 独立资源
光有前端包不够，后端网关、CDN缓存、静态资源路径也得跟着变：
- Kubernetes中为每个环境创建独立namespace，如frontend-dev、frontend-prod
- Nginx配置按环境拆成dev.conf、prod.conf，通过Docker启动时挂载对应文件
- 静态资源上传OSS/CDN时，路径前缀加上环境名，例如https://cdn.example.com/prod/ vs https://cdn.example.com/dev/
