189 8069 5689
小编给大家分享一下怎么在css3打包后自动追加前缀插件：autoprefixer ，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联公司是一家专业提供益阳企业网站建设,专注与成都网站设计、成都做网站、html5、小程序制作等业务。10年已为益阳众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。
用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官网搜一下这家伙
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: false,autoprefixer:false }
: { safe: true, autoprefixer: false}
}),以上是“怎么在css3打包后自动追加前缀插件：autoprefixer ”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！