【兼容】在google30-40版本，或者ie 上面， transform 添加浏览器前缀，实现兼容

最近在兼容低版本的google中，低版本的google也不兼容transform ，所以找了各大网站 都没有找到办法解决，后来找到一个解决了， 不光是在 本地能添加浏览器前缀，在打包后，也有前缀。

原文地址： https://www.cnblogs.com/yhquan/p/10594321.html

 

vue-cli自带了postCss autoprefixer 进行兼容处理，配置如下

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发生冲突。

解决： 

1. 直接注释掉

//  new OptimizeCSSPlugin({
//  cssProcessorOptions: config.build.productionSourceMap
//   ? { safe: true, map: { inline: false } }
//   : { safe: true }
//  }),
带来的问题就是 css没有进行压缩处理

2. 对这个的插件的参数进行配置

new OptimizeCssAssetsPlugin({
 cssProcessorOptions: {
   safe: true,
   // 禁用此插件的autoprefixer功能，因为要使通过postcss来使用          
   autoprefixer: false,
   discardComments: {
      removeAll: true
    }
 },
 canPrint: true
})