在 vue-cli 創建的項目中，用默認的 webpack 配置對項目打包後，發現 css 文件中樣式的前綴有所缺失，例如：flex 這個應該有前綴的屬性卻沒有（display:-webkit-flex; && -webkit-flex:1），導致樣式在 iphone 6s plus 上出現了兼容問題。

postcss 對 css 的前綴是有處理功能的，在項目的默認配置中，會根據各個瀏覽器最新兩個版本的支持情況去添加前綴的，而現在瀏覽器都應該能很好地支持 flex 了，於是，便不現加前綴。對此，我們可以做如下處理：

//vue-loader.config.js

......
module.exports 
 
= {
 ......
  postcss: [
    require(‘autoprefixer‘)({ browsers: [‘last 10 Chrome versions‘, ‘last 5 Firefox versions‘, ‘Safari >= 6‘, ‘ie > 8‘] })
  ]
}

經過以上處理，打包後的 css 應該就擁有合適的前綴了，但並不如此，原因是在打包過程中，css 有個壓縮動作，在這個動作中，壓縮插件（用的是 optimize-css-assets-webpack-plugin 這個插件）會再一次對 css 的前綴做處理，會將它認為不需要的代碼（如不需要的 css 前綴）去掉。因為前面已經用 postcss 對 css 的前綴做過處理，所以在這裏對 css 前綴的處理是多余的，我們可以做如下處理：

// webpack.prod.config.js

......
const OptimizeCSSPlugin = require(‘optimize-css-assets-webpack-plugin‘)

......

new OptimizeCSSPlugin({
    cssProcessor: require(‘cssnano‘),
    cssProcessorOptions: {
    discardComments: { removeAll: true },
    // 避免 cssnano 重新計算 z-index
    safe: true,
    //cssnano通過移除註釋、空白、重復規則、過時的瀏覽器前綴以及做出其他的優化來工作，一般能減少至少 50% 的大小
    
 
//cssnano 集成了autoprefixer的功能。會使用到autoprefixer進行無關前綴的清理。默認不兼容ios8，會去掉部分webkit前綴，比如flex
    //所以這裏選擇關閉，使用postcss的autoprefixer功能
    autoprefixer: false
    },
    canPrint: true
    //cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true }
}),

......

再次打包後，你會發現你想要的前綴出現了。

webpack 對 css 壓縮中對前綴的處理