多环境切换
更新时间:2026-07-14;使用模型:Codex(GPT-5);用户:Jsmond2016
概述
开发者模式支持维护多套项目环境。每套环境固定包含 LOCAL、FAT、UAT、PROD 四个槽位,扩展会自动识别当前环境,并提供跨环境跳转和反馈文本环境标识。
默认模式和测试者模式不展示环境配置、环境快捷入口和“包含环境信息”开关。
配置方式
- 在设置中将模式切换为“开发者模式”。
- 在“环境配置”区域通过 Tab 管理环境组。
- 每个环境组分别填写 LOCAL、FAT、UAT、PROD 的域名。
- 需要维护另一个项目时,点击添加按钮新建环境组。
| 字段 | 说明 | 示例 |
|---|---|---|
| 环境组名称 | 区分不同项目或业务系统 | 管理后台、用户中心 |
| LOCAL | 本地开发环境地址 | http://localhost:5173 |
| FAT | 功能验收测试环境地址 | https://admin.fat.example.com |
| UAT | 用户验收测试环境地址 | https://admin.uat.example.com |
| PROD | 生产环境地址 | https://admin.example.com |
环境地址可以省略协议,保存时会校验地址格式;相同域名不能在不同环境组中重复配置。至少保留一个环境组。
自动识别
非本地页面优先按当前页面 URL 的 origin 精确匹配。对于 localhost 页面,扩展会结合已捕获请求判断实际后端环境:
- 优先匹配请求 URL 与已配置环境的
origin。 - 检查响应头
x-forwarded-for:.fat.对应 FAT、.uat.对应 UAT、.pro.对应 PROD。 - 响应头未命中时,降级检查请求 URL 中的环境标记。
- 已捕获请求但仍未命中时,按 PROD 处理。
识别结果会定位到所属环境组,顶部只展示该组内可跳转的其他环境。
使用方式
环境标签
配置环境后,popup 顶部最多显示两个当前环境之外的环境标签,如 FAT、UAT。点击标签会在新标签页打开目标环境,并保留当前页面的 pathname、查询参数和 hash。
复制环境信息
在复制选项中开启“包含环境信息”后,反馈文本会附带识别到的环境名称,以及保留当前路径后的完整环境地址。
向后兼容
旧版本保存或导出的单组 environments 数组仍可读取。加载时会自动转换为默认环境组,并按名称归并到四个固定槽位;新版本导出统一使用 environmentGroups。
适用场景
- 在不同环境间快速切换,测试同一功能
- 反馈内容中附带环境信息,帮助协作方快速定位问题环境
- 多环境部署的项目,快速访问不同版本的页面