vue中本地启动与打包启动产生的样式不一致

引言

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

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

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

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

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

展示错误

上图是 自己本地启动 后的展示格式、
下图是 构建 之后启动

1、无论如何都看不到 X 号。

2、解决方法 。到前端代码中，找到这个组件 对应的css 样式，。。 将 .a{} 前加 >>> 符号， 然后重新进行打包测试