- 首先在ios8 版本上对h5有一些兼容性的问题
1. 不支持es6的语法 使用babel进行转化
2. 对flex的支持不太好 需要有兼容的写法 使用postCss的 autoprefixer进行兼容处理
2.使用vue-cli (不是3.0 没有尝试) 构建项目开发时,自带了postCss autoprefixer 进行兼容处理,开启 usePostCSS: true
但是开发中,dev环境之下 可以进行正常的添加前缀,但是prd环境 ,打包之后出现了 没有正常添加前缀的情况,研究一番之后发现是,vue-cli构建项目时 在webpack.prd.conf.js
中使用了插件 optimize-css-assets-webpack-plugin github地址
// 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 }
}),
由于这个插件和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
})