用途:指导在本项目中接入无界(wujie)微前端框架,适配 wujie >= 2.1.0,覆盖主应用集成、子应用接入与常见问题排查。
主要能力:无界使用同源 iframe 运行子应用 JS 形成 window 沙箱,使用 WebComponent(shadow DOM)渲染子应用 DOM 实现样式隔离;子应用路由在 iframe 内独立运行,并通过劫持 history 与主应用 URL 同步。文档涵盖组件式接入、多应用同时在线、子应用近乎零改造等能力,并提供 API 参数、路由同步、保活预加载、bus 通信、插件与生命周期、部署排障等参考。
使用方式:主应用按技术栈选择 npm 包,无框架或任意栈使用 wujie 直接调 API,Vue 2 用 wujie-vue2 的 <WujieVue>,Vue 3 用 wujie-vue3,React 用 wujie-react 的 <WujieReact>。子应用无需安装 wujie,通过 window.$wujie 访问注入对象。Vue3 最小接入:npm i wujie-vue3,在主入口 import WujieVue from "wujie-vue3" 并 app.use(WujieVue),页面中使用 <WujieVue name="vue3" url="//localhost:7300/" width="100%" height="100%" :sync="true" />。运行模式分重建、保活(live: true)、单例(live: false 配合生命周期改造)。
限制与注意:保活模式下不能通过修改 url 跳转子应用路由,需使用 bus 通信;Vite 子应用需将 window.location 改为 $wujie.location;name 必须全局唯一,多 Tab 同 name 会冲突;方案确定前需先确认子应用处于重建、保活还是单例模式,三者路由行为不同;排障时先查 faq 索引。具体 API 参数、收费与价格信息暂未提供。