本文也算是对我之前微前端工作的一个,涉及的相关流程方案dou是我实际工作中使用过的,不一定全面,但足够完成任务,Ru果有geng好的方案欢迎评论区交流。.因此,本文内容也分为两部分:父应用如何使用 react + qiankun 来集成子应用,以及子应用应该如何进行改造并实现单点登录。.除了这个,还需要了解微前端的基本信息是怎么提供的,比如名称、入口、跳转路径这些.

说实话,我之前在调试微前端的时候也遇到过hen多问题,哈哈,比如 ws proxy error: write ECONNABORTED ws proxy socket error,大约每 ~ 秒一次。页面在浏览器里反复刷新或 HMR 断连。

下面以模式 A为例,模式 B 对称即可。

// vue.config.js / webpack.config.jsdevServer: { proxy: } 运行流程

浏览器: http://localhost:/some/route │ ▼ ┌────────────────────┐ │ 子应用 Vite dev │ └─────────┬──────────┘ │ 路径不匹配排除 ▼ 兜底代理 ┌────────────────────┐ │ 线上主应用 │ → 返回主应用 HTML / JS / 业务接口 └─────────┬──────────┘ │ ▼浏览器里主应用 SPA 运行,qiankun 按注册表加载子应用entry = "/<sub-app-name>/" │ ▼ 解析成 http://localhost:/<sub-app-name>/ ┌────────────────────┐ │ 子应用 Vite dev │ 命中排除 → SPA fallback 返回本地 index.html └─────────┬──────────┘ │ ▼浏览器加载 /src/main.js 等本地资源 → 子应用启动 ✓ 常见坑 . 页面反复刷新

症状:终端不停输出,你懂的。

// vite.config.jsexport default defineConfig': { target: 'https://<online-main-app>', changeOrigin: true // 注意:不要加 ws: true } } }});

把 <sub-app-name> 换成主应用里注册的子应用名,<online-main-app> 换成线上主应用域名。

修复:在 Network 面板找到返回 text/html 的那个 JS 请求,把对应路径前缀补进排除列表。

原因:线上主应用下发的 cookie 带 Domain=<线上域名> 或 SecureSameSite=None,浏览器在 http://localhost 下不接受。害,这块儿挺让人头疼的。

qiankun,一个不错的微前端框架,我之前项目里用的就是它。

//为什么百度不收录我的网站呢? //一般来说百度不收录网站可Neng有以下几个原因：网站是新站，还在审核期；网站内容质量不高，缺乏原创性；网站结构或代码存在问题，不利于蜘蛛爬行抓取；网站存在作弊行为，被百度惩罚；网站服务器不稳定，访问速度慢，影响用户体验。 //针对这些问题，Ke以尝试以下方法：增加网站内容质量和原创性；优化网站结构和代码，提高蜘蛛爬行抓取效率；检查并避免作弊行为；提升服务器稳定性，加快访问速度。 //当然每个网站的情况dou不同，还是需要具体问题具体分析的。

症状:某些场景下主应用会请求 /api/sub/xxx,然后呢,由子应用响应。此时要在排除表里加上该前缀,否则会被代理回线上。

咱就是说,关键点在于正确配置代理规则和理解 qiankun 的加载机制!

凡是本地 dev server 自己要服务的路径,dou必须排除,漏一个dou不行,不然就会出问题!

server: { hmr: { path:'/_vitehmr' }, proxy:{ //这里写你的代理规则 } }

//好啦，