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效果衝突了，所以禁用它。如今打包出來的與咱們設定的瀏覽器範圍對應的前綴一致

---

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