美文网首页
微前端:qiankun开发问题小记

微前端:qiankun开发问题小记

作者: 韩发发吖 | 来源:发表于2021-11-09 09:10 被阅读0次

问题一、 css 污染问题

描述:多个项目合并到主工程后,出现ui样式混乱,不兼容问题。由于是多个子工程合并到主工程中,每个子工程各有自己独立的样式和配置,造成合并后样式混乱。

子项目之间的样式相互污染,不能解决子项目的样式污染主项目的样式或是主项目样式污染子项目的样式

主项目要想不被子项目的样式污染,子项目是 vue 技术,样式可以写 css-scoped。
子项目要想不被主项目的样式污染,还有待解决办法,期待大家的交流。

从子项目页面跳转到主项目自身的页面时,主项目页面的 css 未加载的 bug

产生这个问题的原因是:在子项目跳转到父项目时,子项目的卸载需要一点点的时间,在这段时间内,父项目加载了,插入了 css,但是被子项目的 css 沙箱记录了,然后被移除了。父项目的事件监听也是一样的,所以需要在子项目卸载完成之后再跳转。我原本想在路由钩子函数里面判断下,子项目是否卸载完成,卸载完成再跳转路由,然而路由不跳转,子项目根本不会卸载。

临时解决办法:先复制一下 HTMLHeadElement.prototype.appendChild 和 window.addEventListener ,路由钩子函数 beforeEach 中判断一下,如果当前路由是子项目,并且去的路由是父项目的,则还原这两个对象。

相关文章

网友评论

      本文标题:微前端:qiankun开发问题小记

      本文链接:https://www.haomeiwen.com/subject/kzlmzltx.html