Vue项目本地运行和打包后样式不同怎么办

大家好，我是南宫。今天来分享一个小问题的解决方法，问题可能不是很具体，可以说是介绍一个思路了。

去年年底的时候我碰到这么一个事情：页面上需要加上一个新按钮，我的新功能就做在点击按钮会出现的弹窗里面。经过一段时间辛苦地开发和联调，终于做完了，打包、部署、提测一条龙走起。结果后来后端同事跟我说，页面上的新按钮并没有显示出来。我一看，我本地上的样式完全正常，打包后的页面上确实没有这个按钮。

为什么没有呢？我在“元素”这里排查，发现这个按钮元素在DOM中是存在的，看不见这个按钮，是因为style这边有一句display: none;相对于打包前并没有这个设置，所以问题的本质是打包前后样式不同的问题。

所以这个问题要怎么解决呢？

首先运行本地项目，同时打开部署后的页面，然后到同一个页面上，分别用“元素”来检查出问题的元素的样式，进行对比。一般有出现这种问题的，肯定能在style上找到不同的地方，而且优先级更高的肯定会出现在更上面的位置。

看看正常的页面的样式，再看看异常的页面的样式，异常页面的style上肯定有正常的样式，而有问题的样式会出现在正常样式的上方。

（如果觉得比较抽象，可以看看我下面放出来的对比图，我最近又遇到这个问题了hhh。 

正常情况是上图，一行放不止一个表单控件，异常情况是下图，一行只有一个表单控件）

 ​​

 异常情况下右上方我圈出来的部分，就是优先级更高的异常样式。

接下来，根据异常样式的特征，比如这里用到了.el-form--inline这个class，去代码里全局搜索，就会找到异常样式的出处。一般情况下，这会来自于很久以前写好的页面，在不带有scoped的<style>中。在打包后，所有的样式文件会被打包到同一个css文件，不带有scoped的<style>的样式代码就有可能会污染到其他页面的样式。

（我个人认为是因为打包后的这份样式在全局都会生效，某些样式本来是只需要在特定的几个页面生效的，但这些样式定义的规则也会在其他页面匹配到其他的元素，于是其他元素无辜中招，形成了异常样式。）

了解到异常样式的来源后，我们回到自己的页面，在自己页面上写一个优先级更高的样式表，覆盖掉异常样式。（比如这里我们希望display是inline-block，异常样式定义成了block，那我们就在自己的页面强调一下要inline-block，可以在前面多写一个页面专属的class来提高优先级。）

这样，就算打包后，所有的样式打包到同一份全局生效的css文件中，有了更高优先级的样式，异常样式就不会影响到你的页面了。这样就解决了这类问题。