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

蓝胖子的多啦A梦

于 2024-02-01 13:43:42 发布

阅读量656

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/maxueyingying/article/details/135956987

版权

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

在这里插入图片描述

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

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

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

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

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

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