qiankun(微前端) - 解决Element组件库部分样式失效，主应用和子应用分别使用element-ui和element-plus，前端微应用qiankun样式无效污染隔离子应用样式影响其他应用

已于 2025-01-16 15:38:45 修改
阅读量6.4k 收藏 4
点赞数 13
分类专栏： 前端组件与功能(开箱即用) 前端常见问题解决 文章标签： qiankun 微前端 element ui element plus vue2.js vue3.js 组件部分样式失效及污染隔离
于 2024-10-29 17:02:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_50545213/article/details/143324998
版权

问题描述

在微前端(qiankun)开发中，主应用和子应用（分别使用vue2+elementUI | vue3+elementPlus）导致样式失效污染问题，强力解决element组件库样式混乱问题彻底搞定样式污染隔离，开启严格样式隔离strictStyleIsolation组件部分样式失效无效问题，项目确保父应用和子应用样式不能互相影响，隔离子应用样式，qiankun微应用父子应用使用Element-ui和Element-plus样式失效或样式混乱污染隔离详细解决方案！

webpack / vite均可，只要你问题和我类似就可以100%完美解决！

在这里插入图片描述

解决教程

首先，

了解本专栏 订阅专栏 解锁全文
Element-ui项目打包后icon图标不显示
weixin_41346436的博客
03-13 6911
Element-ui项目打包后icon图标不显示 element-ui 自带了一套常用的图标集合，使用起来十分方便。最近发现当 Vue.js 项目中使用 element-ui 图标时，如果使用 npm run dev 方式启动，图标是显示正常的 而一旦使用 npm run build 编译打包后发布到服务器上，会发现图片显示不出来（Chrome 浏览器下显示方块 查看网络请求可以看到如下两个字...
前端面试题记录
m0_50290552的博客
09-24 1267
面试题记录
使用微前端（qiankun），解决样式污染问题
zhangjing1019的博客
01-26 6106
使用微前端拆分巨石项目，主应用使用VUE2.0+Element，子应用同样使用VUE2.0+Element。由于主应用和子应用使用了相同的框架，多数元素的class类名相同，子应用与主应用样式隔离不彻底，会导致页面样式错乱。完全使用qiankun自带的沙箱隔离会遇到一些坑。
乾坤微服务（Qiankun）样式隔离深度解析
liuyuanshuaia的博客
02-19 2609
乾坤通过Shadow DOM和动态作用域CSS双轨机制，为微前端应用提供了灵活的样式隔离方案。在实际项目中，开发者需根据浏览器兼容性、子应用技术栈及性能要求选择合适的策略。未来，随着Web Components技术的普及，Shadow DOM或成为微前端样式隔离的终极解决方案，但动态作用域仍将在过渡期扮演重要角色。最佳实践路线图默认启用。对高安全要求的子应用逐步迁移至Shadow DOM。结合CSS-in-JS方案（如styled-components）进一步规避冲突。
qiankun css隔离导致antd样式失效问题
最新发布
m0_51429350的博客
04-03 498
与 Ant Design（antd）的全局样式加载逻辑冲突，导致子应用的 antd 组件样式被覆盖或未生效‌。‌配置启用了Shadow DOM将子应用与外部dom完全隔离，自然也包括了body，导致子组件中antd的样式无法作用到body上，导致了样式的丢失。Antd的Modal，Drawer等组件默认是挂载在body标签下的，strictStyleIsolation。例如，在qiankun中，通过。方式使用StyleProvider可以提高antd的css样式权重，从而恢复样式‌。
qiankun 微前端 隔离子应用样式，解决 ant-design-vue 子应用样式污染问题（已落地）
qq_44933075的博客
07-31 2382
先分析乾坤qiankun 构建之后，会根据你的配置 给每个子应用生成一个id， 当加载到对应子应用的时候，就把内容放到对应的id 标签里去， 这样能有效的隔离 js 代码，但是样式是加载在全局的。所以 当两个子应用的 全局的样式名一样的时候， 切换的子应用的上一个子应用的样式没有被清除是公用，所以就造成了样式污染，同样主应用和子应用之间也会有这个污染。如果是elemt UI 的可以看 下面的博客，我借鉴过他的思路，也是他是通过改下 挂载函数的方法，思路很重要，主要就是解决挂载问题。
微前端（qiankun）子应用样式影响其他应用样式
weixin_42606371的博客
08-10 3868
微前端（qiankun）子应用使用element-plus影响其他应用使用element-ui的样式，导致样式混乱
qiankun主应用（vue2+element-ui）子应用（vue3+element-plus）不同版本element框架css样式相互影响的问题
Alice_hhu的博客
11-18 1049
qiankun主应用（vue2+element-ui）子应用（vue3+element-plus）不同版本element框架css样式相互影响的问题
乾坤qiankun（微前端）样式隔离解决方案--使用插件替换前缀
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
10-17 4490
qiankun作为微前端的一种融合方式，目前也比较成熟，但是由于各类开发技术选型非常繁多，导致了在项目中配置不同，解决别人的问题，不一定能解决自己的问题。
qiankun 框架是怎么做的样式隔离
阿臻
04-25 3027
Qiankun 是一个微前端框架，它在技术上采用了 Web Components 技术实现样式隔离。具体来说，Qiankun 利用 Shadow DOM 的特性，在应用程序容器中创建一个隔离的 DOM 树，使得每个子应用都可以拥有自己独立的样式作用域。 在 Qiankun 中，每个子应用都被封装为一个 Custom Element，这个 Custom Element 包含了子应用所需的所有 HT...
解决qiankun项目与子应用样式混乱问题
fenger_c的博客
06-19 1231
qiankun项目用的是Vue2+Antdesign2，但其中一个子应用用的是Vue3+Antdesign4。集成之后发现子应用的样式混乱，渲染的是Antdesign2的样式。因为Antdesign的样式名字已经全部改成projectKeyXXX了，所以要注意在子应用里所有关于Antdesign的样式前缀都需要改。2. App.vue里用ConfigProvider包住，定义前缀（前缀需与在main.js定义的前缀保持一致）以下步骤在子应用里操作。
微前端四：qiankun在开发中遇到的问题
weixin_44384273的博客
10-18 3789
1、图片路径不对； 2、vue2.0 + element ui 和 vue3.0 + element plus样式冲突；
乾坤(qiankun)框架子系统应用elment-ui框架弹框里的样式消失错乱问题
weixin_44166849的博客
06-10 2185
乾坤(qiankun)框架子系统应用elment-ui框架弹框里的样式消失错乱问题
html字体引用路径,关于qiankun微服务css文件中ElementUI字体引用路径的解决方法
weixin_33634886的博客
06-17 899
问题描述：子应用使用的是vue+elementUI，在项目main.js中需要引入elementUI的样式文件。elementUI的样式文件中有字体文件的引用，是以相对路径的形式写在css文件中的，本来独立部署项目访问是没问题的，问题出现在以qiankun微服务的方式嵌入到主应用中时，路径就不能在以相对路径来显示了，否则就会显示404。问题分析：首先vue项目在webpack打包时会使用extra...
基于qiankun+vue-element-admin实现微前端工程改造
tamil2021的博客
08-02 5333
废话不多说，先上源码：https://gitee.com/tmvc/tmvc
解决微前端qiankun中子应用(element组件动态加载的元素)样式丢失的问题
duansamve的博客
06-05 7793
项目使用了微前端qiankun，子应用中使用的是element组件库，当有el-select组件的子应用插入父应用的弹窗中初看效果是正常的，但是当点击el-select组件时发现组件下拉框中下拉列表样式丢失，后来在主应用中查看源码发现动态加载的el-select下拉列表DOM是动态插入到主应用中，因为在qiankun中应用间的样式是隔离的导致下拉列表没有样式，于是重写了document.body.appendChild方法.........
qiankun实现基座、子应用样式隔离
weixin_43845137的博客
03-23 2515
【代码】qiankun实现基座、子应用样式隔离。
微前端框架 之 qiankun
热门推荐
fmk1023的博客
03-02 3万+
微前端框架 之 qiankun 优秀文档：https://juejin.cn/post/6885211340999229454 一、介绍 qiankun 是基于 single-spa 做了二次封装的微前端框架，通过解决了 single-spa 的一些弊端和不足，来帮助大家实现更简单、无痛的构建一个生产可用的微前端架构系统。 1.1 qiankun的优点/特点 通用的脏活累活应该在框架层面去做，qiankun 基于 single-spa 做了二次封装，很好的解决了上面提到的几个问题。 1.HTML Entry
乾坤的样式隔离、微前端的样式隔离
m0_72996918的博客
09-23 1505
乾坤的样式隔离：乾坤是一种基于微前端的解决方案，它可以将多个独立的前端应用整合到一个单页应用中。在乾坤中，样式隔离是一个重要的技术挑战，因为不同的应用可能使用不同的 UI 库（如 Element-UI 和 Element-Plus），它们的前缀相同，这可能导致样式冲突。总结来说，乾坤通过使用Shadow DOM实现子应用的样式隔离，而微前端可以采用CSS命名空间、CSS-in-JS等方式来实现样式隔离。这个方法可以有效地将不同库的样式隔离，但它需要在应用中添加一些额外的代码，可能会增加应用的复杂性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十一猫咪爱养鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值