解决 VUE：本地运行和服务器上运行样式不一致，run、build 运行时样式有出入

落日映苍穹つ 2022-04-23 08:02 1146阅读 0赞

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1]

1. 我的情况：

我遇到 2 种情况，一个是表格的分页样式有变化。另一个是导航菜单样式有变化。

2. 解决：

**方法一：**

对于第1个问题我只是单纯在那个组件样式文化中加了  scoped 。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70][]

对于我的第2 个问题，用第一种方法不成功。

**方法二：**

于是，F12看到原本的样式上都有一条黑色的线，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 1][]

查后得知，这是样式被覆盖了。再找不带黑线的同名的样式就知道是哪个样式覆盖了原本的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 2][]

原来 是红框中覆盖了我原本的样式，找到红框中的样式设置文件并修改后，果然再运行就正常了。

另：我在网上看到有的是引入样式文件的顺序，影响加载顺序；多个相同样式文件同时存在项目中，要删除多余的；

还有其它原因参见：[Vue 项目本地运行 run 与服务器上 build 样式不一致，build 后样式不生效][Vue _ run _ build _build]

\---------------------------------------------------------------------

2019.5.30 后记

今天又遇到打包后样式有变的情况。

在页面样式不一致的地方，右键 “ 检查 ” 可查看当前问题界面是用的什么样式，如查看样式不对的div 的样式。

找到问题样式后，对比正确情况样式，研究 2 者有什么不一样。

找到区别后去更正错误样式为正确样式。

今天的情况是：App.vue 文件中有一个样式设置覆盖了我需要的样式。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 3][]

[Link 1]: https://www.captainai.net/jiangyu1013/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70]: /images/20220322/ee55149ee356453b86063a65b601bb45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 1]: /images/20220322/3eb149adfde042cf9fb29f79a4d61199.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 2]: /images/20220322/8a75fc59a24d4cd0915029eb0f680340.png
[Vue _ run _ build _build]: https://blog.csdn.net/jiangyu1013/article/details/86679429
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEzMTQ0NDI_size_16_color_FFFFFF_t_70 3]: /images/20220322/a8b2dc0e0b544a15a8cef0cab48a61c7.png