【WuJie-腾讯无界微前端】

原创 已于 2026-01-09 16:45:52 修改 · 1.1k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

于 2025-07-24 15:54:06 首次发布

无界微前端

无界微前端实现方式

  1. 使用前端技术Shadow DOM（影子 DOM），iframe， Custom element（自定义元素），实现微前端渲染子应用的css隔离和js隔离
  2. iframe使用new Blob() 加 URL.createObjectURL()创建一个blob:的伪同源的iframe
  3. React,Vue等三方框架使用WuJie提供的对应框架的组件，借助相应的生命周期钩子实现子应用加载。
  4. jsp等非前端框架需手动调用WuJie API实现子应用加载
  5. 借助Proxy，Object.defineProperties实现对document，location，ownerDocument，baseURI等属性的代理，将shadow dom 与 iframe 与 主应用上下文关联起来。

无界实现简单流程图
简化流程图

无界微前端方案要解决的问题

  1. iframe内嵌的子应用如何保证能够使用主应用上下文中的cookie等信息？
    浏览器的请求大致分为两类，静态资源请求和网络请求。
    因为wujie需要对js的逻辑执行进行代理，所以需要将静态资源的请求转变成网络请求的方式来获取响应体text【第二个问题有提到】。所以wujie暴露了fetch让使用者可以配置跨域请求的自定义函数，以保证请求的静态资源url与当前域名不同源（same-origin）时能够让请求体带有cookie这个请求头。
    在这里插入图片描述
    在这里插入图片描述
    对于网络请求能不能携带cookie这个请求头是同理的。而对于子应用发起的请求能不能携带主应用下的cookie信息，我的理解是这样子的。只要这个请求满足cookie信息配置的Domain，Path等规则，就能够通过携带，与发起位置，怎样发起并无关系。

    总结来看要注意两点:
    第一点：请求能不能带有cookie这个请求头，与当前请求url，当前源，服务端跨域配置等有关系
    第二点：请求头中cookie中能不能携带某一个cookie信息，与当前请求的url和具体cookie信息的配置设置有关系

  2. wujie如何能够保证子应用内部能够正确使用location.protocol + ‘//’ + location.host拼接跳转的正确性？
    wujie在创建过程中使用proxy代理子应用的window，location等，然后将代码执行时的location替换为代理后的proxyLocation对象，从而实现对子应用location的劫持，来返回子应用正确的location信息。
    在这里插入图片描述
    在这里插入图片描述
    但是从wujie的逻辑来看，只有内联脚本，非降级并且是非type=‘module’的才能触发这段逻辑。那其它不满足这个判断的怎么办呢？？？

  3. 即然iframe和shadow dom是分开的，那么无界是如何将两者关联起来的？
    首先，如何将iframe中js执行逻辑中对dom的操作映射到shadow dom。
    对iframe的Document.prototype进行劫持，以下为本地测试劫持Doucment.prototpe.append属性，所实现的效果
    在这里插入图片描述
    劫持Docuemnt.prototype,然后将执行函数的this指向shadow，就与创建的shadow串联起来了。
    在这里插入图片描述
    在这里插入图片描述
    但是存在一个问题，iframe到shadow方向的通道打通了，那shadow到iframe的呢。比如原生html或者jsp中最喜欢写的onclick的原生绑定事件，能不能在shadow中指向iframe的window呢？？？

  4. shadow dom如何保证相对或者绝对路径资源访问的正确性？
    iframe对js中出现的资源访问路径采用了多种处理方式，来保证最终资源请求的正确星
    第一种：
    创建base标签，设置正确指向的href属性，添加到frame中的head标签中
    在这里插入图片描述
    第二种：
    对创建iframe中的HTMLImageElement.prototype的属性进行代理，下面是我本地简单代理 HTMLImageElement.prototype的src属性所实现的效果。
    在这里插入图片描述
    wujie关键逻辑：对HTMLImageElement.prototype的src属性通过Object.prototype进行劫持，然后通过iframe正确设置的baseUrl来将路径替换成完整的url资源路径
    在这里插入图片描述
    在这里插入图片描述

微前端无界方案
michael的博客
05-13 4603
微前端无界方案
微前端实战：基于 WuJie + Vite + Vue3 的无界集成指南
前端开发探索之旅
07-04 2741
本文介绍了如何使用WuJie微前端框架集成Vue3和React应用。WuJie基于WebComponents+iframe实现，具有沙箱隔离、跨框架支持和预加载等特性。文章详细演示了主应用（Vue3+Vite）和子应用（Vue3/React+Vite）的配置步骤，包括环境准备、路由适配、应用间通信（props和事件总线）等关键环节。同时提供了部署注意事项、常见问题解决方案和性能优化建议，如子应用预加载和资源缓存。通过WuJie框架，开发者可以实现技术栈无关的微前端架构，保持各子应用的独立开发体验，同时确保应
使用wujie搭建微前端应用及踩坑
m0_62323931的博客
01-06 2225
UI组件库样式丢失——增加插件
实现将 Vue3 项目作为子应用，通过无界（Wujie）微前端框架接入到 Vue2 主应用中（Vue2 为主应用，Vue3 为子应用）
最新发布
只会写bug
11-27 649
核心逻辑：Vue2 主应用安装wujie-vue2，通过组件配置 Vue3 子应用的name和url即可接入，Vue3 子应用零改造；通信方式：主应用通过props传参，子应用通过接收；通过无界事件总线bus实现双向通信；关键配置：生产环境需配置 Nginx 代理解决跨域和路由刷新问题，history模式需配合prefix和sync实现路由同步。
微前端--无界方案之官网demo操作说明
Jocks5的博客
01-30 7570
微前端--无界方案的案例操作说明
微前端——无界wujie
lanmy_dl的博客
12-24 7633
1.全局安装2.使用pnpm -v可以查看版本号3.pnpm比npm的优势，在pnpm中文网的动机这样写pnpm官网简单来说就是，但有100个vue项目，每个项目都会去安装相应的依赖包，这样导致磁盘的缩小和安装速度慢（每次都会重新下载依赖包），很麻烦。但是pnpm使用软链接硬链接和仓库解决。
wujie 无界 微前端
u010707194的博客
04-17 4213
子应既没有设置为保活模式，也没有进行生命周期的改造则进入了重建模式，每次页面切换不仅会销毁承载子应用。预执行指的是在应用空闲的时候将子应用提前渲染出来，可以进一步提升子应用打开时间，只需要在。当子应用设置为保活模式，切换子应用后仍然可以保持子应用的状态和路由不会丢失。在保活模式下，子应用只会进行一次渲染，页面发生切换时承载子应用。主应用生命周期：（主应用生命周期跟模式没有关系）销毁子应用当前实例，子应用页面如果切换回来。：子应用渲染后触发（生命周期改造专用）：子应用卸载后触发（生命周期改造专用）
微前端框架 Wujie
热爱前端的大宝同学。
04-20 2407
主要总结了微前端框架wujie的基础概念、核心原理、配置方法、高级特性、最佳实践和常见问题等内容。
微前端从源码看无界：为何说它是 qiankun 的 “轻量化替代方案”
vv_bug
04-14 1017
无界微前端（Wujie）是一款由腾讯团队开源的微前端框架，专注于解决复杂前端应用的模块化、子应用独立开发和部署等问题。它通过和Shadow DOM技术实现子应用的样式隔离和脚本沙箱，同时支持跨技术栈的无缝集成（如 React、Vue、Angular 等）。具体的特性跟使用就不详细说明了，小伙伴们可以自己查阅「无界」开发文档，今天我们主要是从源码角度去分析下无界微前端框架。
无界微前端 - 前置知识1（dom与template绑定、生命周期、传递参数）
weixin_43845137的博客
04-01 423
【代码】无界微前端 - 前置知识1（dom与template绑定、生命周期、传递参数）
微前端 无界基本用法
每天都要努力学习哦~~
12-05 2421
不管是样式的兼容、路由的处理、弹窗的处理、热更新的加载，子应用完成接入即可开箱即用无需额外处理，应用。和主应用是同域的，所以主、子应用天然就可以很好的进行通信，在无界我们提供三种通信方式。，浏览器的前进、后退在不做任何处理的情况就可以直接作用于子应用。中，路由也彻底和主应用解耦，可以直接在业务组件里面启动应用。实例，注入到主应用和子应用，所有的应用可以去中心化的进行通信。后，应用发生切换时整个子应用的状态可以保存下来不丢失，结合。子应用采用 iframe 的路由，不用关心路由占用的问题。
将微前端做到极致-无界方案
LuckyWinty的博客
08-15 1809
前端Q我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～公众号点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群微前端已经是一个非常成熟的领域了，但开发者不管采用哪个现有方案，在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题，或无法提供支持。本文提供一种基于 i...
微前端-‘无界‘
qq_58953163的博客
12-25 2238
介绍：微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。（一个web应用中可以独立运行另一个web应用）
无界微前端
weixin_46675635的博客
04-24 1889
预加载所需要的静态资源提前从网络中加载到内存中（preloadApp:({name: '唯一标识',exec:true})）如果需要从外部影响Shadow DOM内的样式，使用::part 而不是用/deep/或>>>预执行指的是在应用空闲的时候将子应用提前渲染出来exec:true。场景3：子应用内容跳转路由通知父应用激活相对应路由的侧边栏。场景1：主应用点击主应用的侧边栏，子应用会自动切换路由。└─ 否 → 是否需要高性能组件级集成。└─ 否 → 是否需要IE兼容？场景2：子应用A点击子应用B。
微前端（无界）
热门推荐
qq1195566313的博客
03-20 2万+
微前端已经是一个非常成熟的领域了，但开发者不管采用哪个现有方案，在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题，或无法提供支持。本文提供一种基于 iframe 的全新微前端方案，完善的解决了这些核心诉求。微前端概念微前端是借鉴了微服务的理念，将一个庞大的应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发，独立运行，独立部署，还可以随意组合，这样就降低了耦合度，从而更加灵活。微前端特性。
微前端 - 以无界为例
小秀的博客
03-31 1591
切换页面时保留子应用状态，避免重复渲染。：主应用负责路由管理和子应用容器渲染。：适配无界生命周期，接收主应用传递的。：实现 JS 执行环境的完全隔离。传递和事件总线机制。：天然支持样式隔离。
无界微前端（Wujie） 的 企业级管理系统 开发方案，结合主应用（Vue3）与子应用（Vue2）的混合架构
qq_74869522的博客
03-12 2313
【代码】 无界微前端（Wujie） 的 企业级管理系统 开发方案，结合主应用（Vue3）与子应用（Vue2）的混合架构。
微前端-无界wujie
An滴饭儿的博客
01-20 2003
无界微前端方案基于 webcomponent 容器 + iframe 沙箱，能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户的核心诉求。1）子应用 js 在和主应用同域的 iframe 内运行，所以 window.parent 可以直接拿到主应用的 window 对象来进行通信。2） 主应用可以向子应用注入 props 对象，里面可以注入数据和方法供子应用调用。beforeUnmount：子应用卸载前触发（生命周期改造专用）
基于wujie的解决方案来简单聊聊微前端
趣谈前端
06-28 611
点击关注公众号，“技术干货”及时达！「1.5W 字预警」前言因为目前有时间了，所以在整理一下自己这几年写过的一些东西的相关文档，准备把一些东西改一下发出来，有的内容可能并不复杂，甚至有点浅显，但是也是对自己这几年的一些复盘和总结了.往期精彩零代码+AI的阶段性复盘文档引擎+AI可视化打造下一代文档编辑器爆肝1000小时, Dooring零代码搭建平台3.5正式上线从零打造一款基于Nextjs+a...
wujie-vue2微前端 子项目用vue3 tsx语法， 子项目改动， 页面上无变化
08-20
在使用 wujie 微前端框架时，如果主项目是基于 Vue2 技术栈，而子项目是基于 Vue3 并使用了 TSX 编写页面内容，可能会遇到子项目代码修改后页面未更新的问题。这一问题通常与资源加载机制、缓存策略或子项目的构建配置有关。 ### 1. 检查子项目的构建配置 确保子项目输出的资源格式符合微前端的要求。在使用 Vite 构建子项目时，需要将输出格式设置为 `UMD`，以便兼容沙箱环境，并确保入口文件正确暴露微前端生命周期钩子。例如，在 `vite.config.ts` 文件中配置如下内容： ```ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import baseConfig from '../../shared-config/vite.base.config'; export default defineConfig({ ...baseConfig, build: { target: 'es2020', format: 'umd', // 微前端要求子应用输出 UMD 格式（兼容沙箱环境） entry: './src/micro.ts', // 暴露微前端生命周期钩子的入口 manifest: true, // 生成资源清单供基座动态加载 rollupOptions: { external: ['react', 'react-dom'], // 外置基座已提供的依赖 output: { name: 'subReactApp', // UMD 全局变量名（避免冲突） globals: { react: 'React', 'react-dom': 'ReactDOM', }, }, }, }, plugins: [ ...baseConfig.plugins, react(), // 使用 React 插件处理 TSX 文件 ], }); ``` 上述配置确保了子项目能够正确输出 UMD 格式的资源，并且使用了 `react` 插件来处理 TSX 文件。如果子项目没有正确配置这些选项，可能会导致资源加载失败或页面内容无法更新。 ### 2. 确保子项目资源正确加载 在微前端架构中，主项目需要动态加载子项目的资源。为了确保子项目能够正确加载并更新页面内容，需要检查以下几点： - **资源路径是否正确**：确保子项目的资源路径（如 JS、CSS 文件）在主项目中能够正确访问。 - **资源缓存问题**：浏览器可能会缓存子项目的资源文件，导致修改后的内容无法生效。可以通过在资源路径中添加版本号或时间戳来避免缓存问题。例如： ```html <script src="sub-app.js?v=1.0.1"></script> ``` ### 3. 检查微前端沙箱环境的隔离机制 wujie 微前端框架通过沙箱环境实现 JS 和 CSS 的隔离。如果子项目的 JS 或 CSS 被沙箱环境拦截，可能会导致页面内容无法更新。可以通过以下方式排查： - **JS 隔离**：wujie 使用 `window` 工厂模式实现 JS 隔离。确保子项目中的全局变量不会与主项目冲突，并且正确使用沙箱环境提供的 API。 - **CSS 隔离**：wujie 支持类似 Vue 的 `scoped` 样式隔离方案。确保子项目的样式不会影响到主项目，并且样式文件能够正确加载。 ### 4. 启用热更新功能 在开发环境中，可以启用热更新功能，以便在子项目代码修改后自动刷新页面。Vite 提供了热更新支持，可以通过以下配置启用： ```ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [ react(), // 启用 React 插件 ], server: { hmr: { overlay: false, // 关闭 HMR 覆盖层 }, }, }); ``` 确保主项目和子项目都启用了热更新功能，并且网络请求能够正确触发页面刷新。 ### 5. 检查子项目的生命周期钩子 在微前端架构中，子项目的生命周期钩子（如 `bootstrap`, `mount`, `unmount`）需要正确实现。如果这些钩子函数没有正确执行，可能会导致子项目无法正确加载或更新。例如： ```ts // src/micro.ts import { createApp } from 'vue'; import App from './App.vue'; let app: any; export async function bootstrap() { console.log('子项目启动'); } export async function mount() { console.log('子项目挂载'); app = createApp(App); app.mount('#app'); } export async function unmount() { console.log('子项目卸载'); app.unmount(); } ``` 确保 `mount` 和 `unmount` 钩子能够正确执行，并且在卸载时释放所有资源。 ### 6. 调试工具的使用 可以使用浏览器的开发者工具进行调试，查看子项目的资源是否成功加载，以及控制台是否有错误信息。重点关注以下几点： - **网络请求**：检查子项目的 JS、CSS 文件是否成功加载。 - **控制台日志**：查看子项目的生命周期钩子是否执行，以及是否有错误提示。 - **DOM 结构**：确认子项目的页面内容是否正确渲染到指定的容器中。 通过以上步骤，可以逐步排查并解决 wujie 微前端框架中 Vue2 主项目加载 Vue3 子项目时页面未更新的问题。如果问题仍然存在，建议检查主项目和子项目的依赖版本是否兼容，并确保所有配置文件正确无误 [^4]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值