css3打包后自动追加前缀插件：autoprefixer

用vue-cli构建的项目脚手架已经帮你把autoprefixer的配置作好了，本身不须要作什么改动就会自动加前缀：

下面一块儿看看涉及到autoprefixer这个插件的一些配置：

1，postcss配置写在.postcssrc.js，

2，浏览器规则则写在package.json上,

3，开发环境（build/webpack.dev.conf.js）样式相关的loader

4，生产环境（build/webpack.prod.conf.js）样式相关的loader

上述的配置设置不须要本身配置，cli脚手架环境搭建的时候已经配置好了。

vue-cli的开发环境和生产环境都是使用了postcss的，而且配置是同样的

这里有一个问题，网上有博主说项目打包前和打包后的css前缀不一致：

--给app.vue下的img添加样式

img{
 display: flex;
 transform: translateX(200px)
}
复制代码

--打包前（即开发环境）img的样式

--打包后（即生产环境）img的样式

根据上面可看出打包前和打包后元素所带的css前缀不一致了。

而后给出的解决方案：

从上面能够看出，vue-cli的开发环境和生产环境都是使用了postcss的，而且配置是同样的，那么为何打包前和打包后元素所带的css前缀不一致呢，

锁定问题

咱们能够分析对比下build/webpack.dev.conf.js和build/webpack.prod.conf.js这两个文件，影响css的无非就module里处理样式的loader和处理css的插件plugin，从上面能够看出影响前缀的postcss的loader在两个环节中是一致的，那么就能够知道问题出在处理css的插件上了。

通过排查发现，webpack.prod.conf.js配置里是多了两个css处理插件的，以下

ExtractTextPlugin这是提取分离css文件，不会影响css前缀，排除，那么问题就锁定到OptimizeCSSPlugin插件身上。再进一步，当咱们把OptimizeCSSPlugin插件注释掉，而后打包测试，竟然发现这时开发环境和生产环境的css前缀一致了，就是它了！！！

咱们打开到npm官网搜一下这家伙 www.npmjs.com/package/opt… 这是一个优化压缩css代码的插件，但很失望，文档说明不多 但咱们注意到有一句话很关键：

这货里面依赖了cssnano,这插件也是用来优化处理css格式、前缀什么的。同时也有个autoprefixer配置参数，直接到它官网 cssnano.co/ 找到autoprefixer：

这里的翻译是：根据browsers选项删除没必要要的前缀。请注意，默认状况下，它不会向CSS文件添加新前缀，这就能够解析清除咱们的问题了，原来这插件的autoprefixer（默认应该是为true）把它认为没必要要的前缀删掉了，而postcss的autoprefixer是将咱们设定的浏览器范围的前缀加上，所以完美冲突了

解决问题

在build/webpack.prod.conf.js文件中OptimizeCSSPlugin插件的属性cssProcessorOptions加上autoprefixer：false来禁用它，避免冲突

上代码：

new OptimizeCSSPlugin({
  cssProcessorOptions: config.build.productionSourceMap
   ? { safe: true, map: false,autoprefixer:false }
   : { safe: true, autoprefixer: false}
 }),
复制代码

结论

最后，看看咱们dev和build出来的css前缀，应该就一致的了： 问题缘由就是：OptimizeCSSPlugin里面依赖了cssnano,而cssnano里面也有一个autoprefixer配置参数，它的做用是删除没必要要的前缀（会误删在某些浏览器必要的前缀），这与postcss的autoprefixer效果冲突了，所以禁用它。如今打包出来的与咱们设定的浏览器范围对应的前缀一致

---

按照网上的博主的配置确实能够把开发环境和测试环境的前缀如出一辙，可是看了下没有必要，问题的前提不是前缀不一致，那个配置只是把和当前浏览器不匹配的前缀不显示出来而已，样式还都是生效的，我的以为若是不是特别大的问题不用改配置。