专门做音效的网站,wordpress 页面显示分类文章,备案名 网站名,网站建设中最重要的环节是样式冲突产生原因
先分析乾坤qiankun 构建之后#xff0c;会根据你的配置 给每个子应用生成一个id#xff0c; 当加载到对应子应用的时候#xff0c;就把内容放到对应的id 标签里去#xff0c; 这样能有效的隔离 js 代码#xff0c;但是样式是加载在全局的 所以 当两个子…样式冲突产生原因
先分析乾坤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 :localelocale :getPopupContainergetPopupContainerkeep-alive :includeloadedRouteNamesrouter-view idfinanxxxxxxxxxx //keep-alive/ConfigProviderjs代码
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?spm1001.2014.3001.5502
