随着前端项目规模不断扩大，微前端架构（特别是Qiankun）已成为管理大型应用的主流方案。虽然这种架构带来了技术栈隔离、独立部署等优势，但也显著增加了本地开发的复杂度：

1、环境隔离问题：基座应用与子应用需要同时运行
2、跨域问题：本地开发服务与线上域名不匹配
3、Cookie/认证问题：域名不同导致登录状态丢失
4、依赖管理问题：多项目间的公共依赖处理

本指南将提供一套完整的解决方案，让您能够高效地进行Qiankun项目的本地开发。

一、核心架构设计

[浏览器访问线上环境] →
[SwitchyOmega全局代理] →
[Whistle中间件] →
├─ 子应用静态资源 → 本地开发服务
└─ API请求 → 线上服务或本地服务（可自定义Header/Cookie）

二、详细配置步骤

1.SwitchyOmega插件安装
-打开Chrome网上应用店
-搜索"Proxy SwitchyOmega"
-点击"添加至Chrome"进行安装

2. 浏览器代理配置（SwitchyOmega）
   -创建新情景模式（如"Dev Proxy"）
   -代理设置：
   协议：HTTP
   服务器：127.0.0.1
   端口：8899（Whistle默认端口）

3. Whistle安装与启动
   -安装 whistle
   npm install -g whistle
   -启动 whistle
   w2 start
   访问 http://127.0.0.1:8899 进入控制台

4. Whistle规则配置
   -在 Rules 标签页添加"dev"页面输入：
   https://example.com http://localhost:3000
   这样 https://example.com 的请求会被转发到 http://localhost:3000。
   -携带自定义header
   在Values标签页添加“req-header”页，输入：
   {
   "username": "111",
   "organization": "111"
   }
   修改请求的转发
   https://example.com/api http://localhost:3000 reqHeaders://{req-headers}