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
    }),

转载于:https://www.cnblogs.com/yhquan/p/10594321.html