Vue - IOS10白屏

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

1.ios10 BUG

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

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

2.swiper / vue-awesome-swiper

若是在vue项目中使用了swiper插件,也会引发ios10空白webpack

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

{
  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-polyfillweb

npm install babel-polyfill --save

2.main.js中引入npm

import 'babel-polyfill'

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

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

替换为babel

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