尧图网页设计 
Wujie 无界微前端3 段代码把 3 个独立部署应用拼进一个后台【免费下载链接】wujie极致的微前端框架项目地址: https://gitcode.com/gh_mirrors/wu/wujie三个独立部署的应用要并进一个后台怎么办手上三个独立部署订单系统 Vue 2、报表是 React、设置页 Vite Vue 3各挂各的域名。产品要求统一挂进一个后台菜单和登录态共享iframe 方案试过性能拉胯状态还割裂。叫无界Wujie的这套微前端就是为此做的子应用一行不改主应用里就能把多个独立部署的应用同时挂在同一页。跟 iframe 比它多解决了什么不罗列全部功能只说落地时真正有感知的差异JS 丢进同域的隐形 iframe 执行原生 window 沙箱加完整 history/location前进、后退、刷新都能作用到子应用DOM 渲染在主应用的 shadow 里弹窗、portal 追加 body 全部可用不再困在盒子里不用注册、不用改路由一个组件直接嵌入同一页面可激活多个子应用也支持保活跑起来安装、配置、预加载、渲染四合一主应用npm i wujie即可主应用是 Vue 或 React 的还有 wujie-vue、wujie-react把这四个函数包成了组件可以直接写在模板里。整个流程其实就是 4 个 APIsetupApp 把默认参数缓存下来后面 preload 和 start 就不用重复传 url 和 elimport { setupApp, preloadApp, startApp, destroyApp } from wujie; setupApp({ name: vue3, // 同名复用同一个实例改 url 等于切路由 url: http://localhost:8991/, exec: true, // 预加载时把脚本也执行掉iframe 提前热好 el: #container, sync: true, // 子应用路由写进主应用 query刷新不丢状态 }); preloadApp({ name: vue3 }); // 主应用启动时调用户点菜单时已命中缓存 startApp({ name: vue3 }); // 路由命中时渲染destroyApp 销毁多个菜单页指向同一个子应用时复用同一个 nameurl 的差异变成同实例内的路由跳转而不是重新加载内部状态表单填写、tab 位置要保留就设alive: true进保活模式页面切走实例仍留在内存。sync: true的含义是无界会劫持 iframe 的 history.pushState把子应用路由写到主应用 url 的 query 上刷新时再读回来浏览器后退按钮也能作用到子应用。preloadApp 的作用是把实例化 iframe 拉资源提前到用户点击之前菜单点击瞬间就是缓存命中。子应用加载慢可以传一个 loading 元素极端情况设degrade: true退回整个 iframe 降级渲染页面至少不白。传数据也简单setupApp 里给 props子应用$wujie.props直接拿到主子之间要说话用 bus 发事件不用 postMessage。子应用这边要动什么零改造是常态绝大多数场景子应用零改造。必须动的只有两处服务端跨域配置以及单例模式下的生命周期。CORS 漏配一个头会怎样子应用资源和接口都从主应用域名发起请求所以子应用服务端必须配 CORS。最常见的坑是Access-Control-Allow-Origin写死*——请求带 cookie 时浏览器会直接拒绝还有一种是资源请求返回 302 跳登录页那不是跨域问题是 fetch 没带 credentials。服务端示例app.use((req, res, next) { res.set({ Access-Control-Allow-Credentials: true, // 必须回显真实 origin带 cookie 时 * 不合法 Access-Control-Allow-Origin: req.headers.origin || *, Access-Control-Allow-Headers: X-Requested-With,Content-Type, Access-Control-Allow-Methods: PUT,POST,GET,DELETE,OPTIONS, }); next(); });单例模式的生命周期怎么写保活模式和重建模式都是零改造。只有单例模式alive 为 false切页面要销毁重建才需要把应用创建和销毁挂到两个全局函数上Vue 3if (window.__POWERED_BY_WUJIE__) { let instance; window.__WUJIE_MOUNT () { const router createRouter({ history: createWebHistory(), routes }); instance createApp(App); instance.use(router); instance.mount(#app); }; window.__WUJIE_UNMOUNT () instance.unmount(); } else { createApp(App).use(createRouter({ history: createWebHistory(), routes })).mount(#app); }Reactif (window.__POWERED_BY_WUJIE__) { window.__WUJIE_MOUNT () ReactDOM.render(App /, document.getElementById(root)); window.__WUJIE_UNMOUNT () ReactDOM.unmountComponentAtNode(document.getElementById(root)); } else { ReactDOM.render(App /, document.getElementById(root)); }Vue 2 写法一样UNMOUNT 里写instance.$destroy()即可。⚠️Vite 项目多调一行就够Vite 是异步加载模块框架可能在子应用加载完之前就调 mount结果白屏。入口里定义完两个函数后手动补一行window.__WUJIE.mount();内置标记防重复 mount。踩过的坑这几个高频问题1. 资源请求 403子应用白屏现象控制台报 CORS policy主应用自己的请求全正常。 根因子应用请求从主域名发起服务端Access-Control-Allow-Origin是*和带 credentials 的 cookie 冲突。 一行修复回显请求方 origin若响应是 302 跳登录则配自定义 fetch 把 credentials 设为 include。2. 下拉框、弹窗位置跑偏现象element-plus 的 select、tooltip 飞出屏幕偏移量明显。 根因popper 2.0 递归计算 offset 直到 window.visualViewport子应用 DOM 挂在 shadowRoot 上没有那部分滚动量。 一行修复子应用 body 设position: relative。3. 第三方库突然 undefined现象第三方脚本引入后独立部署正常接进主应用报 xxx is not defined。 根因无界把脚本包进闭包执行以便劫持 locationvar声明的全局变量没挂到 window 上异步脚本拿不到。 一行修复显式写成window.xxx xxx或用 js-loader 插件运行时改写。完整清单见官方 常见问题。下一步三种模式和差异看官方 运行模式建议先拿一个 vitevue3 子应用挂进 vue2 主应用把保活模式跑一遍。【免费下载链接】wujie极致的微前端框架项目地址: https://gitcode.com/gh_mirrors/wu/wujie创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Wujie 无界微前端：3 段代码把 3 个独立部署应用拼进一个后台
Wujie 无界微前端3 段代码把 3 个独立部署应用拼进一个后台【免费下载链接】wujie极致的微前端框架项目地址: https://gitcode.com/gh_mirrors/wu/wujie三个独立部署的应用要并进一个后台怎么办手上三个独立部署订单系统 Vue 2、报表是 React、设置页 Vite Vue 3各挂各的域名。产品要求统一挂进一个后台菜单和登录态共享iframe 方案试过性能拉胯状态还割裂。叫无界Wujie的这套微前端就是为此做的子应用一行不改主应用里就能把多个独立部署的应用同时挂在同一页。跟 iframe 比它多解决了什么不罗列全部功能只说落地时真正有感知的差异JS 丢进同域的隐形 iframe 执行原生 window 沙箱加完整 history/location前进、后退、刷新都能作用到子应用DOM 渲染在主应用的 shadow 里弹窗、portal 追加 body 全部可用不再困在盒子里不用注册、不用改路由一个组件直接嵌入同一页面可激活多个子应用也支持保活跑起来安装、配置、预加载、渲染四合一主应用npm i wujie即可主应用是 Vue 或 React 的还有 wujie-vue、wujie-react把这四个函数包成了组件可以直接写在模板里。整个流程其实就是 4 个 APIsetupApp 把默认参数缓存下来后面 preload 和 start 就不用重复传 url 和 elimport { setupApp, preloadApp, startApp, destroyApp } from wujie; setupApp({ name: vue3, // 同名复用同一个实例改 url 等于切路由 url: http://localhost:8991/, exec: true, // 预加载时把脚本也执行掉iframe 提前热好 el: #container, sync: true, // 子应用路由写进主应用 query刷新不丢状态 }); preloadApp({ name: vue3 }); // 主应用启动时调用户点菜单时已命中缓存 startApp({ name: vue3 }); // 路由命中时渲染destroyApp 销毁多个菜单页指向同一个子应用时复用同一个 nameurl 的差异变成同实例内的路由跳转而不是重新加载内部状态表单填写、tab 位置要保留就设alive: true进保活模式页面切走实例仍留在内存。sync: true的含义是无界会劫持 iframe 的 history.pushState把子应用路由写到主应用 url 的 query 上刷新时再读回来浏览器后退按钮也能作用到子应用。preloadApp 的作用是把实例化 iframe 拉资源提前到用户点击之前菜单点击瞬间就是缓存命中。子应用加载慢可以传一个 loading 元素极端情况设degrade: true退回整个 iframe 降级渲染页面至少不白。传数据也简单setupApp 里给 props子应用$wujie.props直接拿到主子之间要说话用 bus 发事件不用 postMessage。子应用这边要动什么零改造是常态绝大多数场景子应用零改造。必须动的只有两处服务端跨域配置以及单例模式下的生命周期。CORS 漏配一个头会怎样子应用资源和接口都从主应用域名发起请求所以子应用服务端必须配 CORS。最常见的坑是Access-Control-Allow-Origin写死*——请求带 cookie 时浏览器会直接拒绝还有一种是资源请求返回 302 跳登录页那不是跨域问题是 fetch 没带 credentials。服务端示例app.use((req, res, next) { res.set({ Access-Control-Allow-Credentials: true, // 必须回显真实 origin带 cookie 时 * 不合法 Access-Control-Allow-Origin: req.headers.origin || *, Access-Control-Allow-Headers: X-Requested-With,Content-Type, Access-Control-Allow-Methods: PUT,POST,GET,DELETE,OPTIONS, }); next(); });单例模式的生命周期怎么写保活模式和重建模式都是零改造。只有单例模式alive 为 false切页面要销毁重建才需要把应用创建和销毁挂到两个全局函数上Vue 3if (window.__POWERED_BY_WUJIE__) { let instance; window.__WUJIE_MOUNT () { const router createRouter({ history: createWebHistory(), routes }); instance createApp(App); instance.use(router); instance.mount(#app); }; window.__WUJIE_UNMOUNT () instance.unmount(); } else { createApp(App).use(createRouter({ history: createWebHistory(), routes })).mount(#app); }Reactif (window.__POWERED_BY_WUJIE__) { window.__WUJIE_MOUNT () ReactDOM.render(App /, document.getElementById(root)); window.__WUJIE_UNMOUNT () ReactDOM.unmountComponentAtNode(document.getElementById(root)); } else { ReactDOM.render(App /, document.getElementById(root)); }Vue 2 写法一样UNMOUNT 里写instance.$destroy()即可。⚠️Vite 项目多调一行就够Vite 是异步加载模块框架可能在子应用加载完之前就调 mount结果白屏。入口里定义完两个函数后手动补一行window.__WUJIE.mount();内置标记防重复 mount。踩过的坑这几个高频问题1. 资源请求 403子应用白屏现象控制台报 CORS policy主应用自己的请求全正常。 根因子应用请求从主域名发起服务端Access-Control-Allow-Origin是*和带 credentials 的 cookie 冲突。 一行修复回显请求方 origin若响应是 302 跳登录则配自定义 fetch 把 credentials 设为 include。2. 下拉框、弹窗位置跑偏现象element-plus 的 select、tooltip 飞出屏幕偏移量明显。 根因popper 2.0 递归计算 offset 直到 window.visualViewport子应用 DOM 挂在 shadowRoot 上没有那部分滚动量。 一行修复子应用 body 设position: relative。3. 第三方库突然 undefined现象第三方脚本引入后独立部署正常接进主应用报 xxx is not defined。 根因无界把脚本包进闭包执行以便劫持 locationvar声明的全局变量没挂到 window 上异步脚本拿不到。 一行修复显式写成window.xxx xxx或用 js-loader 插件运行时改写。完整清单见官方 常见问题。下一步三种模式和差异看官方 运行模式建议先拿一个 vitevue3 子应用挂进 vue2 主应用把保活模式跑一遍。【免费下载链接】wujie极致的微前端框架项目地址: https://gitcode.com/gh_mirrors/wu/wujie创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考