wujie微前端企业级方案

一、背景 当前 CMCLink 平台存在两种微前端集成方案并行： 旧方案：原生 iframe 嵌入 + postMessage 通信（mkt、doc、ibs-manage 等子应用在用） 新方案：wu

培训设计原则 分层递进 — 初级能接入、中级能理解、高级能扩展排障 每章必有产出 — 不是"听完就忘"，每章结尾有 Checklist + 动手练习 代码即文档 — 所有示例直接取自项目真实代码，不造

背景 我们的项目是一个典型的企业级 B 端系统，采用 Vue 3 + Pinia + Wujie 的微前端架构： 1 个主应用：负责登录、菜单、布局、系统级数据管理 6+ 个子应用：各自独立开发部署，

写在前面 你有没有遇到过这样的场景： 打开一个 .ts 文件，IDE 疯狂报红 找不到名称"Recordable"，但构建又能过？ 同一个 PageParam 接口，在 shims-vue.d.ts、

一、背景与问题 在微前端架构下，主应用长期积累了 5 套图标方案并存 的混乱局面： # 方案 位置 使用方式 核心问题 1 iconfont JS assets/icon.min.js（115KB）

🌏 一、背景与痛点：为什么图片优化是重中之重？ 在全球化业务中，图片资源往往占据页面体积的 60% 以上。面临的核心挑战包括： 物理距离远：跨国 RTT（往返时延）高，图片加载慢导致白屏。 网络环境杂

一、背景与选型 1.1 现状问题 主应用 cmclink-web-micro-main 采用 iframe 过渡方案 加载 7 个子应用，存在以下痛点： 问题 影响 7 个 <iframe> 硬编码在

一、背景与目标 1.1 现状分析 经过 Phase 1~4 的微前端治理（详见 doc/wujie集成.md），已完成： 已完成项 成果 微前端框架 iframe → wujie，7 个子应用统一接入

目录 一、项目架构概览 二、构建产物设计 三、代码分层与 Hook 复用规范 四、环境体系规划 五、Nginx 网关层设计 六、Jenkins CI/CD 流水线 七、Docker 容器化方案 八、K

一、现状诊断 1.1 样式文件分布（主应用） 当前主应用存在 3 个互不关联的样式目录，没有统一入口： 1.2 main.ts 样式导入链 关键发现：styles/index.scss（包含 var.

1. 核心命题：跨越 "上下文鸿沟" (The Context Gap) 在企业级应用开发中，通用 LLM (如 GPT-4, Gemini) 虽然具备极强的通用编程能力，但在落地时往往面临 "懂代码

在构建全球化应用（Global App）时，前端工程师面临的最大挑战之一是：同一句文案在不同语言下的长度差异巨大。 例如："Create Account" (EN, 14 chars) -> "Ств

一、架构总览 1.1 系统拓扑 1.2 子应用注册表 所有子应用在 packages/micro-bridge/src/registry.ts 中统一注册： 子应用名称 端口 activeRule e

一、问题：为什么要重构 Axios 封装？ 在一个典型的企业级微前端项目中，主应用（Shell）和多个子应用都需要发起 HTTP 请求。最初的做法是每个应用各自封装一套 Axios 实例，但随着项目演