作品七：无界（wujie）微前端后台模板

在线体验

打开作品：无界微前端（新标签页）

本地 Docker 网关入口：http://localhost/wujie-micro/（需已构建 projects/wujie-micro/dist 并启动编排）

一、定位与价值

视角	说明
隔离模型	无界（wujie） 以 iframe / WebComponent 思路实现子应用运行时隔离，样式与全局污染风险低于「裸嵌脚本」方案，适合对 CSS / 全局变量泄漏 敏感的后台类场景
技术栈并存	主应用 Vue 3，子应用可同时演示 Vue 子应用 与 React 19 子应用，与仓库 qiankun 示例（micro-project）形成对照
交付	Monorepo：主应用 + 双子应用 独立构建；线上按路径挂载静态资源，与 Nginx /wujie-micro/ 前缀对齐

对应仓库：projects/wujie-micro（pnpm workspace：main-app、vue-sub、react-sub）。

二、架构透视

浏览器（/wujie-micro/）
        ↓
主应用（Vue 3 + wujie-vue3 + Pinia + TDesign）
  ├── 登录 / 工作台 / 菜单
  ├── 无界加载 Vue 子应用（生命周期 __WUJIE_MOUNT / __WUJIE_UNMOUNT）
  └── 无界加载 React 子应用
              ↓
Nginx：/wujie-micro/ 主包；/wujie-micro/vue-sub/、/wujie-micro/react-sub/ 子资源

与 qiankun 演示的差异（选型备忘）：

维度	qiankun（micro-project）	无界（本作品）
运行时模型	single-spa 体系、路由与应用生命周期耦合度高	wujie 容器 + 子应用 Vite 插件生命周期，贴近「嵌入一页」心智
隔离	JS 沙箱 / 样式策略依版本与配置	更偏 物理隔离 路径，利于文档站提到的「类 iframe 级」诉求

详细接口与概念可参考：无界官方文档 · 快速上手。

三、仓库结构（摘录）

应用	目录	技术栈	本地开发端口（README）
主应用	main-app	Vite、Vue 3、Pinia、TDesign、wujie-vue3	5341
子应用一	vue-sub	Vite、Vue 3、Pinia、TDesign；base: /vue-sub/	7101
子应用二	react-sub	Vite、React 19、Redux Toolkit、Zustand、TDesign；base: /react-sub/	7102

统一本地启动：pnpm install → pnpm dev（需三进程就绪后从主应用菜单进入子应用）。

四、集成环境说明（本站 Docker）

• 网关路径：/wujie-micro/（见 nginx/conf.d/apps/wujie-micro.conf）。
• 静态挂载：docker-compose.yml 将 ./projects/wujie-micro/dist 映射到容器内站点目录（与主应用构建产物一并部署）。
• 生产联调：将主应用中嵌入子应用的 url 与线 base、Nginx location 保持一致；否则会出现子应用资源 404 或白屏。

五、能力与设计取舍

维度	说明
路由同步	主应用侧提供与子应用路由协同的演示（如 useHostRouteSync 等），避免纯 iframe 体验割裂
主题 / 通信	演示 Bus、共享状态栏等模式；生产按域裁剪通信面
文档页	子应用内配有 无界概念 / API / Vite 接入 等专题页，便于对照官方文档阅读

六、运维提示

• 子应用可独立发版：替换 dist 下对应子包产物即可；主应用版本与子应用版本可不同步迭代。
• 回滚时优先回退 出现问题的子应用构建，主应用保持稳定。

---