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效果衝突了，因此禁用它。現在打包出來的與我們設定的瀏覽器範圍對應的字首一致

---

按照網上的博主的配置確實可以把開發環境和測試環境的字首一模一樣，但是看了下沒有必要，問題的前提不是字首不一致，那個配置只是把和當前瀏覽器不匹配的字首不顯示出來而已，樣式還都是生效的，個人覺得如果不是特別大的問題不用改配置。