在vue项目中，对于之前从未接触过nginx的我，第一次在nginx部署vue项目，研究了半天终于部署成功了，然而样式却和我在本地的不一样，样式和本地竟然不一样，气死我了，然后有各种搜索，终于找到了解决办法：

一、多个相同样式文件同时存在项目中

现象：修改组件时，在项目中复制了一个组件重命名对其进行修改，在本地执行正常，后打包上传，css的样式并没有被正确加载。

解决过程：在控制台查看样式还是之前的样式，把其中一处样式在所有相关组件中修改，打包上传后样式生效，这说明旧的样式在打包的时候覆盖了新的样式。将旧组件删除后解决上述问题。
原因猜测：因为相同组件包含不同样式时，无法判断出哪份样式在后面渲染，如果旧的样式刚好在打包后在渲染，则会覆盖掉新写的样式。在本地执行时，因为样式没有被打包，访问页面时渲染的都是组件自身样式，所以不会出现上述现象。

二、全局（main.js）引用样式

现象：在全局样式中引入了Element UI或者Mint UI样式，在header组件中修改了部分样式，在本地正常执行，后打包上传，样式出现错乱现象。

解决过程：在main.js文件中引入Element UI或者Mint UI的时候应该将其放在router引用的后面
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import router from './router'
import App from './App'

       注意：`import App from './App'`这句引入最好放在所有样式引入的最后，不然也很容易造成样式错乱现象，放到最后相当于最后加载新写的css样式，因为css样式是按照引入的顺序执行的，如果不放到最后，很容易出现相同类名的样式被覆盖掉。

如果你觉得我的文章对你有用，请帮我点个赞吧，您的赞是我前进的动力，小女子在此谢过大家了！