vue移动端项目兼容ios10以下机型页面白屏和样式显示问题

解决白屏问题

方案:使用es6-promise和babel-polyfill
首先安装这两个依赖:

npm install --save-dev es6-promise
npm install --save-dev babel-polyfill

安装完成后,在项目的main.js文件中添加如下代码:

import 'babel-polyfill';
import Es6Promise from 'es6-promise'
Es6Promise.polyfill();

解决打包后样式显示不出来的问题

方案:更改webpack.prod.conf.js 文件中的css插件的配置,如下图:注释掉的是原来的配置,注释下面的是新的配置。

// new OptimizeCSSPlugin({
//   cssProcessorOptions: config.build.productionSourceMap
//     ? { safe: true, map: { inline: false } }
//     : { safe: true }
// }),
new OptimizeCSSPlugin({
  cssProcessorOptions: {
    safe: true,
    autoprefixer: false,
    discardComments: {
      removerAll: true
    }
  },
  canPrint: true
}),
发布了3 篇原创文章 · 获赞 2 · 访问量 591

猜你喜欢

转载自blog.csdn.net/weixin_38824257/article/details/96704128
今日推荐