Vue - IOS10白屏

参考博客:假如测试说你的网站在iOS 10有问题

1.ios10 BUG

build/webpack.prod.conf.js新增mangle的选项

new UglifyJsPlugin({  
  uglifyOptions: {
    compress: {
      warnings: false
    },
    // 解决ios10手机打开空白问题
    mangle: {
      safari10: true   
    }
  },
  sourceMap: config.build.productionSourceMap,
  parallel: true
}),

2.swiper / vue-awesome-swiper

如果在vue项目中使用了swiper插件,也会引起ios10空白

build/webpack.base.conf.js中新增配置项

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
    resolve('src'), 
    resolve('test'), 
    resolve('node_modules/webpack-dev-server/client'),

    // 解决ios10手机打开空白问题
    resolve('node_modules/swiper'),
    resolve('node_modules/dom7'),
    resolve('node_modules/ssr-window'),
   ]
},

3.ES6转ES5

1.安装babel-polyfill

npm install babel-polyfill --save

2.main.js中引入

Vue - IOS10白屏_第1张图片

import 'babel-polyfill'

3.build/webpack.base.conf.js中修改entry

entry: {
  app: './src/main.js'
},

替换为

entry: {
  app: ["babel-polyfill", "./src/main.js"]
},

 

你可能感兴趣的:(Vue)