vue2.0+ 移动端 部分较低版本系统手机出现的白屏问题

最近的项目中遇到了有些低版本系统（如ios<11）会出现白屏问题。

首先要知道的时候白屏问题应该是js报错 js运行中断 一些router进的页面也没发加载，而这些js大都是因为不支持es6语法而导致的。那知道怎么知道你的js是否报错了呢，因为我们开发调试的时候大都用Chrome，Firefox这样的浏览器，内核较为先进，不会因为不识别es6而报错。所以首先用你的微信pc客户端自带的浏览器，看是不是能打开，如果打不开大多数这个js问题，但是由于微信自带浏览器无法调试，所以看不到控制台报错。

这时候你可以下载一个百度浏览器，他的版本是这样的。

很多es6的问题到这里都会报错。

检查错误可以用这个浏览器，但是我们要知道的是vue webpack已经用babel进行es6的转码了，但是还会出现es6的语法问题，说明es6还有部分没被转化为es5，导致这部分js未被转化的极大可能原因就是引入的插件所含有的es6.这时候先安装'es6-promise'和'babel-polyfill'。如果还没有没被解决，那么要从插件的原因找起，

例如我在引用swiper4.0+时候一直会有dom7和ssr-window的报错问题，就是这两个的es6语法问题导致的，那么我可以swiper降为3.0加的

npm install [email protected] --save

或者就用4.0的，但是要在webpack.base.config.js中配置

{
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        },
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'),resolve('node_modules/swiper'),resolve('node_modules/dom7'),resolve('node_modules/ssr-window')]
      },

主要是resolve('node_modules/dom7'),resolve('node_modules/ssr-window')这两个。

这里只是引用个例子，主要说的是白屏问题大都是es6未被转化的问题，所再找错的时候要结合报错找的出问题的插件，做一些调整。移动端的浏览器内核较为先进了，但也不是都支持es6

后来还是白屏  就通过vconsole来进行移动端调试  打印报了下面这个错

vconsole使用介绍：https://www.jianshu.com/p/388e31a451ea 

应该是项目中用了fetch导致的   解决方法：

安装依赖"whatwg-fetch": "^1.0.0",

然后在webpack.base.conf.js中改成：

entry: {
  app: ["whatwg-fetch", "./src/main.js"]
},

终于计划通！

参考https://www.cnblogs.com/Lough1992/articles/9755293.html