vue3微前端qiankun子应用作为主应用对接wujie子应用 iframe报错null：子应用加载被主应用中断

最新推荐文章于 2024-03-21 12:57:14 发布
最新推荐文章于 2024-03-21 12:57:14 发布
阅读量423 收藏
点赞数
文章标签： 前端 javascript node.js vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010707194/article/details/134053806
版权

vue3微前端qiankun子应用作为主应用对接wujie子应用

iframe报错null：子应用加载被主应用中断

wujie-vue3版本

解决方案：

1.wujie降级处理degrade设为true

2.attrs设置属性src地址url,url为wujie主应用空白页地址

示例代码：

<WujieVue
width="100%"
height="100%"
:sync="false"
:degrade="true"
:attrs="{src:'https://aaa/#/aa'}"
name="form"
:props="{ data: propsData }"
:url="mtUrl"
/>

注意：使用attrs时，degrade需要设为true

https://aaa/#/aa为wujie主应用空白页地址

给韭菜姑娘个涨停板吧
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
qiankunTestByWu:微前端解决方案qiankun测试用例，主应用及子应用替换vue-cli 3构建
03-08
node.js v12.13.0 1104，主应用采用vue-cli脚手架，重新创建新的demo 目录下admin-wu主要应用microfrontend-demo主要应用sub-app1为子应用sub-app2为子应用 已解决 1，子应用与主应用，子应用与子应用跨域问题2，主应用改造为webpack vue应用3，主应用路由路由切换子应用4，子应用加载qiankun的生命周期5，子应用内部切换路由6，部署-子应用部署可直接沿用以前的发布部署流程，没有什么要特殊处理的 ] vue-cli3生产部署时发现的问题，并附带临时解决方法＃64-部署跨域，nginx配置7，JS变量隔离（qiankun现有，使用JS Sandbox）每个子应用都有相应的生命周期，同时，只会有一个子应用的实例互补。js沙箱封装在qiankun的生命周期中。唯一不足的地方是，window的对象，无法隔离，最好不要绑定原型
快速实现一个基于Vue.js的微前端应用
02-24
我们团队在公司内部主要为国内某TOP3建筑公司编写ERP中后台应用，由于是建筑领域，其ERP系统十分庞杂。在我于2018年底入职时，该系统就已编写了三年。但是由于需求方依然在提需求，所以依然在编写新应用，维护，迭代...
微前端之什么是微前端
BradenHan的专栏
03-06 1794
微前端（Micro Frontends）是一种软件架构模式，它借鉴了后端微服务架构的思想，将复杂单一的前端应用拆分为多个可独立开发、部署和维护的小型前端应用。每个小应用关注特定的业务域，并能够以一种无缝的方式集成到同一个主框架或者容器中，形成统一的用户体验。在微前端架构下，不同的团队或项目组可以采用不同的技术栈来开发各自的前端模块，这些模块在运行时进行组合加载，共享公共资源，同时保持各自的功能和样式独立。
qiankun？这次我选了wujie！
最新发布
zz_jesse的博客
03-21 166
本文面向对无界和微前端有一定了解的人群，不再对微前端的概念和无界的基础使用方式做解释说明前言掘金上搜wujie，那么大眼一看，好像全都是介绍的，并没有几个落地方案的分享。正好我上个月把部门内三个业务系统用wujie整合了一下，记录成文章和大家分享一下。（为什么不用qiankun？qiankun之前做了好多次了，这次想尝个鲜~）背景说明笔者部门内有三个管理系统，技术栈分别是：A： Vue2 + We...
qiankun、wujie、micro-app框架简析
weixin_38954787的博客
08-02 2225
随着ES6的普及，利用Proxy可以比较良好的解决这个问题，这就诞生了LegacySandbox，可以实现和快照沙箱一样的功能，但是却性能更好，和SnapshotSandbox一样，由于会污染全局的window，LegacySandbox也仅仅允许页面同时运行一个微应用，所以我们也称LegacySandbox为支持单应用的代理沙箱。执行子应用js代码的时候会将this.proxyWindow作为参数传入，这样子应用原本应该直接操作window的地方，都是操作这个proxyWindow对象，实现了代理功能。
无界(wujie)微前端实现及三种通信方式介绍
acheding的博客
09-29 1万+
本文主要介绍了无界(wujie)微前端和qiankun的对比、wujie的实现及三种通信方式（props、window、eventBus）。
微前端wujie、qiankun、micro-app、EMP 方案比较
weixin_43832782的博客
02-08 2812
微前端wujie、qiankun、micro-app、EMP 方案比较
iframe子页面获取父页面控件赋值时报错Uncaught SyntaxError: Invalid or unexpected token
m0_50744317的博客
05-09 978
iframe子页面获取父页面控件赋值时报错Uncaught SyntaxError: Invalid or unexpected token 这是我之前在ssh里面的写法，是可以的。 但是拿过来用就不行了，通过浏览器调试发现报错：Uncaught SyntaxError: Invalid Unicode escape sequence 在浏览器看可以发现值 ...
微前端问题汇总
Beam
03-17 6207
一、沙箱设置的简单理解 strictStyleIsolation = false 可以获取到子应用的dom节点，主应用可修改子应用样式，但是子应用不可修改主应用的样式。需要注意样式不能冲突。 strictStyleIsolation = true 样式严格分离，不可获取到子应用的dom节点。 二、res中无法拿到router对象 在js文件比如axios的返回拦截res中无法拿到router对象进行路由跳转 挂到原生方法上即可。 if (!window.__POWERED_BY_QIANKUN__) {
无界微前端框架子应用第二次加载白屏
qq_32805013的博客
12-01 708
给我整无语了，还能这样，经过后续测试，发现虽然可以正常用，但是存在偶发性的白屏不渲染，这意味着没发在生产环境使用，还是得琢磨琢磨，子应用已做生命周期改造，在使用过程中发现在不使用保活模式的情况下第二次进入同一个子应用的时候该子应用会白屏。我的主应用是vue3+webpack，所以直接使用官方的vue组件封装，子应用是uniapp。我想是不是执行时序的问题，所以给子应用mount方法加上了延时，尝试后发现并不是这个原因。没有一点点头绪，就把子应用的路由改造去掉了，
笔记：无界微前端入门
Big_YiFeng的博客
04-18 3424
wujie(无界)是腾讯在 2022 年 7 月推出的微前端框架，下面是腾讯前端团队的原话无界微前端方案基于 webcomponent 容器 + iframe 沙箱，能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户的核心诉求。
【微前端】使用无界嵌入子应用
cjsnyxz的博客
06-24 2873
所谓微前端，就是把一个应用当成vue组件嵌入到另一个应用。将一个页面拆分成独立的小型应用，各个应用间相互独立，可以随意组合，更加灵活。原生比较常用的方案是使用iframe，但是这种方案存在一些缺点，如：dom隔离严重、路由无法保活、父子应用通讯困难等。本文将介绍一种基于iframe的全新微前端方案 --【无界】，解决了上述问题外还具有成本低、速度快、原生隔离、功能强等优点。使用iframe作为天然的js沙箱，不会污染主应用环境使用 Web Components 来隔离htmlcss。
micro-application:qiankun微前端，子应用pdf转图片项目
03-16
##微前端微前端框架 。包含了一个子应用： pdf转图片子应用 ＃主应用就是一个建筑物 ＃安装在三个目录下分别运行 npm i ＃开发在三个目录下分别执行 npm run dev ＃部署 先后执行 node vue-pdf-server.js node main...
qiankun-example::rocket: qiankun实战demo，父应用vue，子应用用react和vue
05-08
qiankun-example qiankun 实战 demo，父应用 vue，子应用用 react 和 vue
三分钟了解微前端, 乾坤方案改造 和无界方案改造
m0_71835253的博客
07-07 3645
三分钟了解微前端, 乾坤方案改造 和无界方案改造
微前端 无界基本用法
每天都要努力学习哦~~
12-05 603
不管是样式的兼容、路由的处理、弹窗的处理、热更新的加载，子应用完成接入即可开箱即用无需额外处理，应用。和主应用是同域的，所以主、子应用天然就可以很好的进行通信，在无界我们提供三种通信方式。，浏览器的前进、后退在不做任何处理的情况就可以直接作用于子应用。中，路由也彻底和主应用解耦，可以直接在业务组件里面启动应用。实例，注入到主应用和子应用，所有的应用可以去中心化的进行通信。后，应用发生切换时整个子应用的状态可以保存下来不丢失，结合。子应用采用 iframe 的路由，不用关心路由占用的问题。
微前端实际应用：iframe、qiankun
qq_45829293的博客
08-16 5099
多应用同时激活在线框架具备同时激活多应用，并保持这些应用路由同步能力组件式的使用方式无需注册，无需路由适配，在组件内使用，跟随组件装卸，卸载应用级别的keep-alive子应用开启保活模式，应用发生切换时整个子应用的状态可以先保存下来不丢失，结合预执行模式可以获得类似ssr的打开模式纯净无污染：利用iframe和ShadowRoot搭建js隔离沙箱和css隔离沙箱利用iframe的history和主应用的history在同一个来搭建天然的路由同步机制性能和体积兼具开箱即用。............
qiankun框架: vue2 主应用访问子应用报错 [import-html-entry]:error occurs 或 died in status LOADING_SOURCE_CODE
热门推荐
风间琉璃c
02-09 2万+
控制台报错：Uncaught Error: application 'contractCenterApps' died in status LOADING_SOURCE_CODE: [qiankun]: You need to export lifecycle functions in contractCenterApps entry 或者 之类的错误，都可能是这个原因。 这个问题仅限vue2，即文件目录结构为： 这种的，vue3不会有这个问题，vue3直接在vue.con...
iframe 修改样式 及 vue 多个项目之间怎么互相引入、乾坤框架的使用
pengxiangfei666的博客
09-23 3642
iframe 修改样式 及 vue 多个项目之间怎么互相引入、乾坤框架的使用
vue的qiankun子应用为什么hash路由跳转不成功
06-09
在使用 Qiankun 开发子应用时，如果子应用使用的是 hash 模式路由，需要在子应用的入口文件中，手动初始化路由。 在 Vue 的子应用中，可以在 `main.js` 文件中进行路由初始化，具体实现如下： ``` import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false // 手动初始化路由 let instance = null function render(props = {}) { const { container } = props instance = new Vue({ router, render: h => h(App) }).$mount(container ? container.querySelector('#app') : '#app') } // 如果不是作为子应用使用，则直接渲染应用 if (!window.__POWERED_BY_QIANKUN__) { render() } // 导出生命周期钩子函数 export async function bootstrap() {} export async function mount(props) { // 初始化路由 render(props) } export async function unmount() { // 销毁实例 instance.$destroy() instance = null } ``` 在这里，我们通过 `render` 函数手动初始化了路由，并在 `mount` 钩子中再次调用 `render` 函数，以保证子应用在挂载时能够正确初始化路由。 另外，需要注意的是，在切换子应用时，主应用会将当前的路由信息传递给子应用，因此，子应用需要在接收到这些信息后自行进行路由跳转。你可以通过监听 `qiankun` 的 `routeChange` 事件来实现这个功能，具体实现如下： ``` import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false // 手动初始化路由 let instance = null function render(props = {}) { const { container } = props instance = new Vue({ router, render: h => h(App) }).$mount(container ? container.querySelector('#app') : '#app') } // 如果不是作为子应用使用，则直接渲染应用 if (!window.__POWERED_BY_QIANKUN__) { render() } // 导出生命周期钩子函数 export async function bootstrap() {} export async function mount(props) { // 初始化路由 render(props) // 监听 routeChange 事件 props.onGlobalStateChange((state, prev) => { if (state.type === 'vue2_subapp_route_change') { const { path } = state.payload router.push(path) } }) } export async function unmount() { // 销毁实例 instance.$destroy() instance = null } ``` 在这里，我们通过 `props.onGlobalStateChange` 监听 `routeChange` 事件，并在事件回调函数中跳转路由。当主应用切换路由时，会触发这个事件，从而实现路由跳转。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值