用vue-cli構(gòu)建的項目腳手架已經(jīng)幫你把autoprefixer的配置做好了繁调，自己不需要做什么改動就會自動加前綴：
下面一起看看涉及到autoprefixer這個插件的一些配置：
1，postcss配置寫在.postcssrc.js，
2，瀏覽器規(guī)則則寫在package.json上,
3，開發(fā)環(huán)境（build/webpack.dev.conf.js）樣式相關(guān)的loader
4走净，生產(chǎn)環(huán)境（build/webpack.prod.conf.js）樣式相關(guān)的loader
上述的配置設(shè)置不需要自己配置，cli腳手架環(huán)境搭建的時候已經(jīng)配置好了孤里。
vue-cli的開發(fā)環(huán)境和生產(chǎn)環(huán)境都是使用了postcss的伏伯，并且配置是一樣的
這里有一個問題，網(wǎng)上有博主說項目打包前和打包后的css前綴不一致：
--給app.vue下的img添加樣式
img{
display: flex;
transform: translateX(200px)
}
--打包前（即開發(fā)環(huán)境）img的樣式
--打包后（即生產(chǎn)環(huán)境）img的樣式
根據(jù)上面可看出打包前和打包后元素所帶的css前綴不一致了捌袜。
然后給出的解決方案：
從上面可以看出说搅，vue-cli的開發(fā)環(huán)境和生產(chǎn)環(huán)境都是使用了postcss的，并且配置是一樣的虏等，那么為什么打包前和打包后元素所帶的css前綴不一致呢弄唧，
鎖定問題
我們可以分析對比下build/webpack.dev.conf.js和build/webpack.prod.conf.js這兩個文件，影響css的無非就module里處理樣式的loader和處理css的插件plugin霍衫，從上面可以看出影響前綴的postcss的loader在兩個環(huán)節(jié)中是一致的候引，那么就可以知道問題出在處理css的插件上了。
經(jīng)過排查發(fā)現(xiàn)敦跌，webpack.prod.conf.js配置里是多了兩個css處理插件的澄干，如下
ExtractTextPlugin這是提取分離css文件，不會影響css前綴峰髓，排除傻寂，那么問題就鎖定到OptimizeCSSPlugin插件身上。再進(jìn)一步携兵，當(dāng)我們把OptimizeCSSPlugin插件注釋掉疾掰，然后打包測試，居然發(fā)現(xiàn)這時開發(fā)環(huán)境和生產(chǎn)環(huán)境的css前綴一致了徐紧，就是它了＞裁省Ｌ堪谩！
我們打開到npm官網(wǎng)搜一下這家伙
https://www.npmjs.com/package/optimize-css-assets-webpack-plugin
這是一個優(yōu)化壓縮css代碼的插件拂檩，但很失望侮腹，文檔說明很少
但我們注意到有一句話很關(guān)鍵：
這貨里面依賴了cssnano,這插件也是用來優(yōu)化處理css格式、前綴什么的稻励。同時也有個autoprefixer配置參數(shù)父阻，直接到它官網(wǎng) https://cssnano.co/ 找到autoprefixer：
這里的翻譯是：根據(jù)browsers選項刪除不必要的前綴。請注意望抽，默認(rèn)情況下加矛，它不會向CSS文件添加新前綴，這就可以解析清除我們的問題了煤篙，原來這插件的autoprefixer（默認(rèn)應(yīng)該是為true）把它認(rèn)為不必要的前綴刪掉了斟览，而postcss的autoprefixer是將我們設(shè)定的瀏覽器范圍的前綴加上，因此完美沖突了
解決問題
在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}
}),
結(jié)論
最后苛茂，看看我們dev和build出來的css前綴，應(yīng)該就一致的了：
問題原因就是：OptimizeCSSPlugin里面依賴了cssnano,而cssnano里面也有一個autoprefixer配置參數(shù)鸠窗，它的作用是刪除不必要的前綴（會誤刪在某些瀏覽器必要的前綴）妓羊，這與postcss的autoprefixer效果沖突了，因此禁用它∷欤現(xiàn)在打包出來的與我們設(shè)定的瀏覽器范圍對應(yīng)的前綴一致
按照網(wǎng)上的博主的配置確實可以把開發(fā)環(huán)境和測試環(huán)境的前綴一模一樣侍瑟，但是看了下沒有必要，問題的前提不是前綴不一致丙猬，那個配置只是把和當(dāng)前瀏覽器不匹配的前綴不顯示出來而已涨颜，樣式還都是生效的，個人覺得如果不是特別大的問題不用改配置茧球。
