当前位置：首页 > news >正文

qiankun 微前端隔离子应用样式，解决 ant-design-vue 子应用样式污染问题（已落地）

news 文章来源：https://blog.csdn.net/qq_44933075/article/details/140801012 2025/1/16 10:55:01

样式冲突产生原因

先分析乾坤qiankun 构建之后，会根据你的配置给每个子应用生成一个id，当加载到对应子应用的时候，就把内容放到对应的id 标签里去，这样能有效的隔离 js 代码，但是样式是加载在全局的
在这里插入图片描述
所以当两个子应用的全局的样式名一样的时候，切换的子应用的上一个子应用的样式没有被清除是公用，所以就造成了样式污染，同样主应用和子应用之间也会有这个污染

解决问题一、使用 qiankun 的内置方法start 的experimentalStyleIsolation 设置为true

我们使用experimentalStyleIsolation 来进行隔离，因为experimentalStyleIsolation的配置相当于加了scoped ，进行子应用的样式作用域控制，防止子应用的样式进行污染，对比其他人的
在这里插入图片描述
我们在主应用的app.js 使用start 配置，将子应用隔离开

import { start } from 'qiankun';start({sandbox: {// 开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 [shadow dom]节点，从而确保微应用的样式strictStyleIsolation: false,// 设置实验性的样式隔离特性，即在子应用下面的样式都会包一个特殊的选择器规则来限定其影响范围experimentalStyleIsolation: true}});

然后再访问子应用的标签，增加作用域前缀，这样子应用之间就会单独隔离开，但是会存在很多问题
在这里插入图在这里插入图片描述

解决冲突二、配置组件挂载位置

select的数据会找不到挂载的节点，造成展示异常，无法显示,并且Modal 和Drawer 都会挂载整个body
在这里插入图片描述

这是只用找到子应用的App.vue 使用 ConfigProvider 对整个子应用的标签进包裹就行,其中 finanxxxxxxxxxx，是你自己定义的子应用名称，keep-alive 和 router-view 不做解释，跟这个优化没关系，根据个人情况写里面的内容

	<ConfigProvider :locale="locale" :getPopupContainer="getPopupContainer"><keep-alive :include="loadedRouteNames"><router-view id="finanxxxxxxxxxx" /></keep-alive></ConfigProvider>js代码
import { ConfigProvider } from 'ant-design-vue';components: { ConfigProvider },methods: {getPopupContainer() {return document.getElementById('finanxxxxxxxxxx');}}

这样通过qiankun 的配置加上我们子应用组件挂载就能解决大部分的问题，类似用scoped 给每个样式增加作用域的方法解决

如果是elemt UI 的可以看下面的博客，我借鉴过他的思路，也是他是通过改下挂载函数的方法，思路很重要，主要就是解决挂载问题
https://blog.csdn.net/zhangjing1019/article/details/135862536?spm=1001.2014.3001.5502

样式冲突产生原因

解决问题 一、使用 qiankun 的内置方法start 的experimentalStyleIsolation 设置为true

解决冲突 二、配置组件挂载位置

相关文章：

解决问题一、使用 qiankun 的内置方法start 的experimentalStyleIsolation 设置为true

解决冲突二、配置组件挂载位置