详解怎样在css3装包后全自动追加前缀软件：aut

用vue-cli搭建的新项目脚手架早已帮你把autoprefixer的配备做好了，自身不必须做甚么修改就会全自动加前缀：

下面1起看看涉及到到autoprefixer这个软件的1些配备：

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的，而且配备是1样的

这里有1个难题，在网上有博主说新项目装包前和装包后的css前缀不1致：

--给app.vue下的img加上款式

img{
 display: flex;
 transform: translateX(200px)
}

--装包前（即开发设计自然环境）img的款式

--装包后（即生产制造自然环境）img的款式

依据上面可看出装包前和装包后元素所带的css前缀不1致了。

随后得出的处理计划方案：

从上面能够看出，vue-cli的开发设计自然环境和生产制造自然环境全是应用了postcss的，而且配备是1样的，那末为何装包前和装包后元素所带的css前缀不1致呢，

锁住难题

大家能够剖析比照下build/webpack.dev.conf.js和build/webpack.prod.conf.js这两个文档，危害css的不过就module里解决款式的loader和解决css的软件plugin，从上面能够看出危害前缀的postcss的loader在两个阶段中是1致的，那末便可以了解难题出在解决css的软件到了。

历经清查发现，webpack.prod.conf.js配备里是多了两个css解决软件的，以下

ExtractTextPlugin这是提取分离出来css文档，不容易危害css前缀，清除，那末难题就锁住到OptimizeCSSPlugin软件身上。再进1步，当大家把OptimizeCSSPlugin软件注解掉，随后装包检测，竟然发现这时候开发设计自然环境和生产制造自然环境的css前缀1致了，便是它了！！！

大家开启到npm官方网站搜1下这家伙

https://www.npmjs.com/package/optimize-css-assets-webpack-plugin

这是1个提升缩小css编码的软件，但很心寒，文本文档表明非常少

但大家留意到有1句话很重要：

这货里边依靠了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}
 }),

结果

最终，看看大家dev和build出来的css前缀，应当就1致的了：

难题缘故便是：OptimizeCSSPlugin里边依靠了cssnano,而cssnano里边也是有1个autoprefixer配备主要参数，它的功效是删掉无须要的前缀（会误删在一些访问器必要的前缀），这与postcss的autoprefixer实际效果矛盾了，因而禁用它。如今装包出来的与大家设置的访问器范畴对应的前缀1致

依照在网上的博主的配备的确能够把开发设计自然环境和检测自然环境的前缀1模1样，可是看了下沒有必要，难题的前提条件并不是前缀不1致，那个配备只是把和当今访问器不配对的前缀无法显示出来罢了，款式还全是起效的，本人感觉假如并不是非常大的难题无需改配备。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。