vue打包添加樣式兼容前綴

在ios8 版本上的h5對flex的支持不太好，需要有兼容的寫法。 vue-cli自帶了postCss autoprefixer 進行兼容處理，配置如下

在vue-loader.config.js中開啟 usePostCSS: true

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction,
    usePostCSS:true  // 開啟 usePostCSS
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
}

解決插件沖突

配置后發現在開發環境時，正常添加環境，而生產環境打包的並沒有添加兼容的前綴。

原因： vue-cli構建項目時 在webpack.prd.conf.js中使用了插件， optimize-css-assets-webpack-plugin,和postCss發生沖突。

// webpack.prd.conf.js
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

new OptimizeCSSPlugin({
  cssProcessorOptions: config.build.productionSourceMap
    ? { safe: true, map: { inline: false } }
    : { safe: true }
}),

解決：

1. 直接注釋掉

//  new OptimizeCSSPlugin({
//  cssProcessorOptions: config.build.productionSourceMap
//   ? { safe: true, map: { inline: false } }
//   : { safe: true }
//  }),
帶來的問題就是 css沒有進行壓縮處理

2. 對這個的插件的參數進行配置

   new OptimizeCSSPlugin({
      // cssProcessorOptions: config.build.productionSourceMap
      //   ? { safe: true, map: { inline: false } }
      //   : { safe: true }
      // 對這個的插件的參數進行配置
      cssProcessorOptions: {
        safe: true,
        // 禁用此插件的autoprefixer功能，因為要使通過postcss來使用          
        autoprefixer: false,
        discardComments: {
           removeAll: true
         }
      },
      canPrint: true
    }),