vue-cli3.0 脚手架 项目打包后，运行在服务器上，出现样式错乱的问题解决解决

vue-cli3.0 脚手架 项目打包后，运行在服务器上，出现样式错乱的问题解决解决

在使用vue-cli3.0 脚手架开发项目过程中，因为使用别人的框架开发的，在项目打包上线后，发现前台样式错乱问题，经过一顿好找，终于解决了问题了！

vue 单文件 样式引入问题

在vue单文件中，可以几种方式编写：

1. 	<style lang="less" scoped>编写样式文件</style>
   

2. 其中lang 指定使用哪种语言编写样式， scoped 限制样式的范围，如果不加，则是全局的，可能会造成污染，只有你自己确定的情况下，不影响其他组件的样式，否则最好建议添加上
3. 也可以在style中通过@import 方式引入文件

4.    <style lang="less" scoped>
      	@import "路径"
      </style>```
   

6.通过@import引入的样式文件，最后编译出来的样式文件，是全局的，除非你确定这个文件的样式不会影响到全局的其他的组件样式，否则不能通过这样的方式引入，这也是编译后样式错乱的原因之一
7.如果你非要使用引入，该怎么解决呢？
8. 那就使用 的方式引入使用

总结

1、使用vue-cli脚手架搭建的项目，在开发的过程中，如果是全局的样式，在vue-config.js中配置，css文件或者less文件皆可，具体方法，百度
2、在编写vue单文件的使用，style样式建议使用scoped 加以限制作用域
3、在样式文件中，使用 @import 方式引入样式文件时，编译打包时，生成的文件是全局的样式，可能会影响到其他组件的样式，这会导致其他的组件的样式出现错乱，切记这点