解决： Vue 项目本地运行 run 与服务器上 build 样式不一致，build 后样式不生效

电玩女神 2022-03-22 13:38 1409阅读 0赞

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

**PS：本人遇到这个问题是用文中最后一句话解决：" 在组件的样式中记得添加 'scoped' "。**

在Vue项目开发过程中遇到两次，本地运行正常，build后在服务器上样式没有生效，或者在本地的效果没有正常显示，  
下面一一说明：

一、多个相同样式文件同时存在项目中  
      现象：修改组件时，在项目中复制了一个组件重命名后进行修改，在本地执行正常，后打包上传，无法展示正常效果。  
      解决过程：在本地试图修改总是不见效果，在控制台查看样式仍是之前的样式，把其中一处样式在所有相关组件中修改，打包上传后样式生效，这说明是旧的样式在打包时覆盖了新的样式。将旧组件删除后解决上述问题。  
     原因猜测：因为相同组件包含不同样式时，无法判断哪份样式时在后面渲染，如果旧样式刚好打包后在后面渲染，则会覆盖掉新写的样式。在本地执行时，因为样式没有打包，访问页面时渲染的都是组件自身样式，所以不会出现上述问题。

二、全局(main.js)引用样式  
      现象：在全局引入了Element UI 样式，在header组件中修改部分样式，在本地执行正常，后打包上传，无法展示正常效果。  
      解决过程：因为在项目中段发现该问题，以为是后续的样式造成的影响(虽然我也认为可能性极小)，删除新写的组件，没有效果。运行一段时间之前的代码，项目正常运行，这迫使我回想中间这段时间对项目做了什么？...............，除了新写了一些组件，还将一些配置信息从index.js中转移到了main.js中，测试发现果然是这里出现了问题。配置中同时出现了Element UI 样式文件引用，还有router的引用，将yang样式引用放在router引用后解决问题。  
     原因猜测：不正常的样式显示的还是组件原始的样式，由此猜测router加载时会加载组件样式，将样式文件在router后引用会将router加载时渲染的样式覆盖掉，所以建议将router的引用放在最后面。

以上原因猜测是个人分析，大家有新见解请在下方留言。

最后，在每个组件的样式中记得添加 'scoped'

\---------------------   
转自：https://blog.csdn.net/fengjingyu168/article/details/78132401

[Link 1]: https://www.captainai.net/jiangyu1013/