最近在兼容低版本的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
})