标签：exp 文件中 IV webp 兼容问题 sso roc ade 过程
在 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 } }), ......
再次打包后，你会发现你想要的前缀出现了。
标签：exp 文件中 IV webp 兼容问题 sso roc ade 过程
原文地址：https://www.cnblogs.com/fenghen/p/9104365.html
