【前端技术】Vue在打包之后出现Css样式冲突，解决方法。

原文链接
先说问题

1：在做vue项目打包时出现Css样式冲突的问题。在本地运行项目时样式都是正常，但在服务器进行打包之后项目的整体样式就有问题了。

举例说明：

1.图片大小发生变化，怎么改也改不好。

2.在查看F12中会多出当前页面没有设置过的Css样式。

3.或者是设置过的样式，在F12中显示带“黑线”的也就是被注释的。

4.页面样式跑偏等等。

都有可能是Css样式冲突造成的,不清楚大家是不是这样的,反正我是这样的。

经过这次的问题,把我遇到的解决办法记录一下,

遇到的解决方案

1.第一种方法可以选择在每个vue组件的style标签上加上

<style scoped>
<style>

对于scoped的解释:
    1.它实现了组件的私有化。只对当前的style有效。不会造成全局样式的冲突。
    
    2.scoped使用起来还是比较简单的,但是要慎用,因为当你想要使用全局组件或者公有组件时,就会发现问题的所在。(这里不多说,原因是鄙人也不是太懂。)
    
    3.还有就是使用scoped时,当按F12时可以看到在每个class标签,Id标签等等。都会有一个`[data-v-03e1dfbf]`以data开的标识。含义: 在当前style标签样式中代表唯一性。

但是这种的解决方案起到好像作用不大,(甚至是没有作用)也有可能是我写的不对。

2.第二种方法是说在打包过程中,由于引入的样式顺序不同导致的样式冲突。

1.在main.js 中,把顺序
     import Vue from 'vue'
     import App from './App'
     import router from './router'
     import axios from 'axios'
     import iView from 'iview'
     import 'iview/dist/styles/iview.css'
     import global from './Global'
     import mui from './assets/js/mui.min.js'
     import ElementUI from 'element-ui'
     import 'element-ui/lib/theme-chalk/index.css'
     
     改成类似下面这种,我的理解:不是自己写的,而是通过npm安装的一些组件和样式放到偏上,其余的放到偏下。
     
     import Vue from 'vue'
     import 'iview/dist/styles/iview.css'
     import mui from './assets/js/mui.min.js'
     import ElementUI from 'element-ui'
     import 'element-ui/lib/theme-chalk/index.css'
     import axios from 'axios'
     import iView from 'iview'
     import global from './Global'
     import App from './App'
     import router from './router'

这种解决方法好像也不大起作用,也有可能是我写的不对。

这种解决方法在style标签上加上的。

3.第三种方法是目前最有效的解决方法。

其主要原因是因为多个vue组件之间共用同一个Class类名(.XXX),导致的样式冲突。
    
    1.为什么npm run dev不会出现样式冲突,
    而npm run build会出现样式冲突。
    dev是将Css样式打包到js中。
    而
    build是通过"extract-text-webpack-plugin"这个插件将所有的Css样式都放到一个Css文件中,这就会出现样式冲突的问题。

    2.解决方案：浏览器调试，找到互相影响的样式，修改类名。

第三种方法对目前来说 是对的,但是有一个小缺点就是类名太多的话,修改起来有点麻烦。