Vue打包后,页面样式出现混乱,刷新即可恢复正常

错误效果

本地上的样式完全正常打包后的页面第一次进入出现样式错误的现象,刷新一次就恢复正常了
在这里插入图片描述

正确效果

在这里插入图片描述

找到问题

在这里插入图片描述
异常情况是右上方我圈出来的部分,

.spContent .conTitle{} 是这个Live Video的样式类,
但是页面中也使用了第二个 conTitle类部分样式,所以导致页面样式显示错误,刷新一次后就好了

了解到异常样式的来源后,我们回到自己的页面,在项目中搜索,找到相同的类名,发现这个conTitle在其它页面上使用了。覆盖掉异常样式。

解决方式

  1. A、B页面的CSS样式都加上scoped(表示仅作用于当前页面)
  2. 在自己的页面强调一下,可以在前面多写一个页面专属的class来提高优先级。
  3. 修改class类名,不要有重复的(我使用的是这个方法解决啦~
    这样,就算打包后,所有的样式打包到同一份全局生效的css文件中,异常样式就不会影响到你的页面了。这样就解决了这类问题。

tips :留一个小问题哈,希望大家有好的方法可以分享出来一起参考学习下

我这里其实 scoped 都加了,类名前面也都加了页面专属的class,按道理说不同页面使用了 coTitle这个类名 打包后怎么冲突了呢 , 有点不太理解 ,这次我是给重复类名修改成不同的了,就好啦

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Vue之状态管理的简单使用(事件总线(Event Bus),Vuex和若依前端示例)

文章目录 Vue之状态管理的简单使用(事件总线(Event Bus),Vuex和若依前端示例)Vue之事件总线(Event Bus)的简单使用Vuex进行状态管理的简单使用若依前端代码store状态管理: Vue之状态…

机械师K7 87键盘拆解螺丝位置

拆键盘不需要拔掉所有键盘帽,只需要拔掉螺丝位置所在的两侧键帽就可以. 红色①-⑮是螺丝所在位置,一般在两个键帽中间下面位置就是螺丝. 拆开以后电池仓尺寸:4CM*9CM , 适合的电池型号:504080型 50:电池厚度50mm 40:电池宽度40mm 80:电池长度80mm 插头是:1.25红黑头 TB都可以买…

VR全景技术如何运用在文旅展示,VR全景技术对景区有哪些好处

引言: 随着科技的不断进步和社会的不断发展,VR全景技术越来越受到人们的关注。在文化旅游行业中,VR全景技术的应用为景区提供了全新的展示方式和体验内容,极大地丰富了游客的文化旅游体验。那么VR全景技术能给文旅展示带来哪些好…

Windows 10 系统重装太简单了,U盘、PE已经成为历史

虽时至今日,Windows 系统的越来越现代化,连安装方式越简单很多。使用微软官方的安装程序,几乎可以像安装软件一样安装系统。本文将推荐几种小淙比较喜欢的 Windows 10 系统重装方式,大家可以按照教程说明操作。 注意:…

Hive中left join 中的where 和 on的区别

目录 一、知识点 二、测试验证 三、引申 一、知识点 left join中关于where和on条件的知识点: 多表left join 是会生成一张临时表。on后面: 一般是对left join 的右表进行条件过滤,会返回左表中的所有行,而右表中没有匹配上的数…

Unity中开发程序打包发布

添加ESC脚本 使用Unity打包发布的过程中,考虑到打开的程序会处于全屏界面,而此时我们又会有退出全屏的需求,因此需要添加ESC脚本,当我们单击ESC脚本的过程中,退出全屏模式。 在Assets/Scenes下,创建esc.cs…

正弦波拟合

正弦波拟合是一种常见的数学方法,用于确定最佳匹配给定数据集的正弦波形。这可以用于各种应用,如信号处理、周期性数据分析等。以下举例展示如何进行正弦波拟合。 步骤与方法 收集数据:首先,你需要收集或生成一组数据&#xff0…

陪诊小程序系统专业开发:从需求分析到用户体验

随着社会老龄化程度的加深,以及人们对医疗服务需求的增加,陪诊服务逐渐成为一种重要的社会服务。为了满足这种需求,陪诊小程序系统应运而生。本文将探讨陪诊小程序系统的专业开发,包括需求分析、系统设计、技术实现和用户体验等方…

《区块链简易速速上手小册》第8章:区块链的技术挑战(2024 最新版)

文章目录 8.1 可扩展性问题8.1.1 基础知识8.1.2 主要案例:比特币的可扩展性挑战8.1.3 拓展案例 1:以太坊的可扩展性改进8.1.4 拓展案例 2:侧链和分层解决方案 8.2 安全性与隐私8.2.1 基础知识8.2.2 主要案例:比特币交易的安全性8.…

若依框架快速入门

首先看若依文档 一般情况下, ruoyi-system是储存后台代码的, ruoyi-ui是储存前端代码的 1.拉取代码 2.若依的结构 3.运行SQL脚本 sql文件夹中是有两个sql脚本的,这两个脚本都是若依开源项目的必须脚本,需要运行在你自己 的数…

Django中的模板

目录 一:基本概念 二:模板继承 在Django中,模板是用于呈现动态内容的HTML文件。它们允许你将动态数据与静态模板结合起来,生成最终的HTML页面。 Django模板使用特定的语法和标签来插入动态内容。你可以在模板中使用变量、过滤器和标签来控…

XVC768AE102 3BHB007211R0102

XVC768AE102 3BHB007211R0102 XVC768AE102 3BHB007211R0102 基于CAN总线接口和模块控制器实现组合机床电控通信系统的设计 "... 并联组合机床电控的数据采集模块和CAN总线组成。 本文研究的 ... 。 监控主机通过CAN总线从各模块获取现场控制数据,监控整个系…

头戴式耳机什么牌子性价比高?公认高性价比的头戴式耳机推荐

头戴式耳机作为现代音乐与声音体验的必备品,一直以来都备受消费者的关注,那么,在众多的品牌中,哪些头戴式耳机的性价比最高呢?本文将为你揭晓这个秘密,推荐一些公认的高性价比头戴式耳机,让你在…

C/C++实现无序入参的命令解析工具

C/C实现无序入参的命令解析工具 1 实现思路2 主要功能3 效果展示3.1 直接运行代码图3.2help命令执行效果图3.3命令行执行命令解析效果图 4 代码实现5 代码下载 1 实现思路 基本介绍: 思路来源于atlas,atc(模型转换工具),该工具对命令支持众多&#xff0…

Unity 导入图片时,如何自动设置格式

AssetPostprocessor是Unity中的一个强大工具,它允许您控制在导入资源时发生的事情。它主要被用来处理在导入或重新导入资源时自定义编程操作的需求。 AssetPostprocessor的主要作用: 1. 自定义资源导入设置:可以自定义图片,模型&…

TensorFlow2实战-系列教程4:数据增强

🧡💛💚TensorFlow2实战-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Jupyter Notebook中进行 本篇文章配套的代码资源已经上传 猫狗识别1 数据增强 猫狗识别2------数据增强 猫狗识别3------迁移学习 对于图像数据…

微信公众号在线客服源码系统,开发组合PHP+MySQL 带完整的安装代码包以及搭建教程

移动互联网的快速发展,微信公众号成为了企业与用户之间的重要沟通桥梁。为了满足企业对微信公众号在线客服的需求,小编给大家分享一款基于PHP和MySQL的微信公众号在线客服源码系统。这套系统能够帮助企业快速搭建自己的微信公众号在线客服平台&#xff0…

构建中国人自己的私人GPT—支持中文

上一篇已经讲解了如何构建自己的私人GPT,这一篇主要讲如何让GPT支持中文。 privateGPT 本地部署目前只支持基于llama.cpp 的 gguf格式模型,GGUF 是 llama.cpp 团队于 2023 年 8 月 21 日推出的一种新格式。它是 GGML 的替代品,llama.cpp 不再…

AVR 328pb定时器0基本介绍和使用

AVR 328pb定时器0基本介绍和使用 📌参考ATmega328PB文档.📍结合参考同架构lgt8f328p中文文档:http://www.prodesign.com.cn/wp-content/uploads/2023/03/LGT8FX8P_databook_v1.0.4.pdf 📗定时器0基本功能描述 两个独立的输出比较…

【Web前端实操21】商城官网_白色导航

今日份实现白色导航栏部分,也就是第三部分,效果如图中划线所示: 本次实现代码如之前的全局样式不再赘述,如有需要可以去我博客的Web前端实操19或者20自行查看。 本次主要更新mi.css和index.htm。 实现导航栏所需要的CSS样…