vue项目打包后，css兼容性样式前缀消失解决方案～

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

但是本小仙女在开发过程中，发现一个问题，OMG# ~~~~~ #
项目打包前后的样式怎么会不一样？？？譬如：
这个css3中设置背景渐变的属性吧，打包后在谷歌浏览器里面竟然不兼容。打开控制台一看，咦？属性前缀肿么没有了？？？

网络上面找解决方法，看下面?

我们可以分析对比下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官网搜一下这家伙
https://www.npmjs.com/package/optimize-css-assets-webpack-plugin
这是一个优化压缩css代码的插件，但很失望，文档说明很少
但我们注意到有一句话很关键：

这货里面依赖了cssnano,这插件也是用来优化处理css格式、前缀什么的。同时也有个autoprefixer配置参数，直接到它官网 https://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: { inline: false },autoprefixer:false }
        : { safe: true,autoprefixer:false }
    })

结论

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

原文链接[https://blog.csdn.net/u010633266/article/details/85097990]
————————————————