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

样式冲突产生原因

先分析乾坤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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3280827.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

080基于ssm+vue的大学生兼职信息系统

开发语言&#xff1a;Java框架&#xff1a;ssmJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;Maven3.…

matlab仿真 信道编码和交织(上)

&#xff08;内容源自详解MATLAB&#xff0f;SIMULINK 通信系统建模与仿真 刘学勇编著第八章内容&#xff0c;有兴趣的读者请阅读原书&#xff09; ​​​ ​ ​ ​ clear all N10;%信息比特的行数 n7;%hamming码组长度n2^m-1 m3;%监督位长度 [H,G]hammgen(m);%产生(n,n-…

ai写作一键生成软件有哪些免费的网站推荐

AI写作助手大揭秘&#xff01;1秒提升创作力&#xff0c;高效出文秘籍&#xff01; 在这个信息爆炸的时代&#xff0c;每个人都可以成为信息的发布者。 不论是个人博客、社交媒体更新&#xff0c;还是学术文章、企业报告&#xff0c;写作无处不在。 然而&#xff0c;高质量的…

产品升级!抗性宏基因组又增添新成员:毒力基因VFDB-2024版

凌恩明星产品 抗性宏基因组 内容又增加啦&#xff01; 注释数据库增添新成员—— 毒力因子VFDB注释-2024版 VFDB数据库全称为Virulence Factors of Pathogenic Bacteria&#xff0c;用于专门研究致病细菌、衣原体和支原体致病因子的数据库。来源于微生物&#xff0c;并对微…

C语言指针·入门用法超详解

目录 1. 什么是指针 2. 指针变量的定义格式 3. 指针的作用 3.1 查询数据 3.2 存储数据&#xff08;修改数据&#xff09; 3.3 操作其他函数中的变量 3.4 函数返回多个值 3.5 函数的结果和计算状态分开 1. 什么是指针 通过内存地址&#xff0c;指向的空间&#…

终端pip安装包后,Pycharm却导入失败?新手别慌,3招搞定!

很多小伙伴在学习Python的过程中,都会遇到这种情况:明明在终端用pip安装好了需要的包,但在Pycharm中导入时却报错。难道是安装姿势不对? 例如在cmd中已经有了pandas,但是去pycharm中导入pandas显示没有 先别急着怀疑人生,这很可能是因为pip安装包的路径和Pycharm项目使用…

数据结构之八大排序(上)

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;数据结构&#xff08;Java版&#xff09; 目录 排序的相关介绍 直接插入排序 希尔排序&#xff08;缩小增量排序&#xff09; 选择排序 …

SQL-自连接和分组

一.介绍 这是一道面试题&#xff0c;看似简单&#xff0c;其实还是有一定技巧的&#xff0c;分析一下可以复习一下SQL查询的一些重要概念。 二.问题 给定一个包含四列的员工表 IDNameSalaryManagerId 要求 获取经理姓名、每个经理的员工数量以及每个团队的总工资。 三.设…

Vscode ssh Could not establish connection to

错误表现 上午还能正常用vs code连接服务器看代码&#xff0c;中午吃个饭关闭vscode再重新打开输入密码后就提示 Could not establish connection to 然后我用终端敲ssh的命令连接&#xff0c;结果是能正常连接。 解决方法 踩坑1 网上直接搜Could not establish connectio…

前端表格控件:打造自动化报表的高效工具

摘要 在现代Web应用中&#xff0c;自动化报表的生成对于数据分析和业务决策至关重要。前端表格控件提供了一种直观且强大的方式&#xff0c;使得报表的创建、展示和交互变得更加容易。本文将探讨如何利用前端表格控件实现自动化报表的设计、生成和优化。 引言 自动化报表可以…

《Milvus Cloud向量数据库指南》——ChatGLM:从GLM-130B到GLM-4

ChatGLM:从GLM-130B到GLM-4的跨越:智谱AI在通用人工智能领域的深度探索与实践 在人工智能的浩瀚星空中,智谱AI如同一颗璀璨的新星,以其独特的技术视角和坚定的创新步伐,在通用人工智能(AGI)的征途上留下了深刻的足迹。技术生态总监贾伟在近期的一次分享中,不仅为我们描…

分布式日志分析系统--ELK

文章目录 ELK概述ELK主要特点ELK应用架构 Elasticsearch原理JSON格式倒排索引 ES与关系型数据库ES相关概念ES安装说明1.环境初始化2.优化系统资源限制配置3.编辑ES服务文件elasticsearch. yml 优化ELK集群安装脚本scp的使用集群安装成功 Shell命令API使用创建索引创建Type创建分…

Spring Cache常用注解

依赖代码如下&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-cache</artifactId></dependency> 常用注解详解 1. Cacheable 作用&#xff1a;主要用于配置方法&#xff0c;使其…

真实体验!猫咪长肉选这些主食罐!猫生、希喂、黑夜传说详细测评

我的猫咖店铺开在高校附近&#xff0c;顾客以学生为主&#xff0c;也有很多养猫人士会到店里来&#xff0c;和我交流选粮经验。不少铲屎官都羡慕我店里的猫咪体格健壮&#xff0c;希望能介绍一些能够帮助猫咪长肉的主食罐头。那么今天我就选择了三款高肉含量的猫罐头进行测评&a…

【JLINK】J-link Commander

官方参考文档&#xff1a;J-Link Commander - SEGGER Wiki 一、运行 打开windows命令行窗口&#xff0c;找到有jlink.exe文件的地方&#xff0c;直接输入jlink.exe即可运行 二、常用命令 输入命令时候&#xff0c;大小写不影响 Command (long)Command (short)ExplanationExa…

【面向就业的Linux基础】从入门到熟练,探索Linux的秘密(十四)-租云服务器及配环境、docker基本命令

主要介绍了租云服务器和docker配置、基本命令&#xff01;&#xff01;&#xff01; 文章目录 前言 一、云平台 二、租云服务器及安装docker 1.阿里云 2.安装docker 三、docker命令 将当前用户添加到docker用户组 镜像&#xff08;images&#xff09; 容器(container) 四、实战…

在linux运维中为什么第一道防线是云防火墙,而不是waf

在Linux运维和云计算环境中&#xff0c;第一道防线通常是云防火墙&#xff08;Cloud Firewall&#xff09;&#xff0c;而不是Web应用防火墙&#xff08;WAF&#xff09;&#xff0c;主要是因为云防火墙提供了更基础和广泛的网络层安全控制。以下是一些关键原因&#xff1a; 1…

vue elementui 上传视频 以及上传视频失败重新上传没反应的处理方法

<template><el-drawertitle"上传视频"size"50%":visible.sync"drawer":direction"direction"><div class"content"><div class"upload-box" v-if"!secondStep"><!--on-exce…

艾体宝干货 | 如何分析关键网络性能指标?持续接收样品试用申请!

网络性能是企业顺利运营的重要基础&#xff0c;而Allegro流量分析仪作为一款强大的网络性能分析工具&#xff0c;为企业提供了深入了解网络运行状况的途径。在本文中&#xff0c;我们将探讨如何利用Allegro 流量分析仪分析关键网络性能指标&#xff0c;以优化网络性能、提高安全…

AI来了,这4个方面,是我们普通人的赚钱机会

在2024年&#xff0c;AI不仅改变了我们的生活方式,更为我们带来了前所未有的赚钱机会。今天&#xff0c;让我们一起探索如何利用AI赚钱的几种方法。 通过AI做自由职业 还记得小时候大人们常说"一技在身,走遍天下"吗?在AI时代,这句话变得更加真实。自由职业意味着你…