低版ios手机ios8,ios9,安卓6以后的自带浏览器打开VUE开发的H5页面有时候会出现白屏的问题，这是因为vue 项目中es6的方法和语法在这些低版本的手机上不支持，解决办法 es6转es5

一般网上说的流程较为顺利，但是我的看了后面你绝对有所收获，看过不后悔想再来一回

步骤一（较为顺利的解决方案）

1.执行 npm install babel-polyfill  安装一下 babel-polyfill

保险起见 npm install es6-promise  安装一下 es6-promise

2.然后入口js  main.js里面 引入

import 'babel-polyfill'  （务必千万一定放在第一行）

import Es6Promise from 'es6-promise'

Es6Promise.polyfill()

require('es6-promise').polyfill()

es6-promise的两种引入方式写一种就可以了

如果步骤一方案并没有解决你的白屏问题，这时候你会怎么想  怎么解决呢 请思考1分钟

你肯定会想难道这两个三方库引入失败，难道我代码里面打包之后有其他非es6语法导致的报错

这时候在手机上你需要看到代码报错，需要用一下微信小程序团队开发的vconsole.loga工具，使用很简单，不会弄得请百度或者请移步我的另一篇文章

https://blog.csdn.net/qq_39963516/article/details/81073289

请不要谢我~~，我很低调

引入vconsole.log的代码也要放在上面 写在引入 上面两个库的代码下面就可以

如果手机上有vconsole.log的绿色按钮说明 babel-polyfill es6-promise  vconsole.log全部引入成功因为代码走到了最后一行代码并且有显示，那么白屏问题为什么还没解决 接下来你会怎么解决 当然是点开vconsole.log查看报错消息

我遇到的是这两个报错 

1，error Uncaught SyntaxError: Unexpected token ILLEGAL

2，error use of const in strict mode.

很显然这两个都是 打包后的代码里面报es6语法不能识别的问题，那么我们既然成功引入了，为什么会出现这样有部分代码es6转换es5失败的问题呢，能想到的是可能是static里面使用es6语法 因为webpack不会转义static里面的js的，于是我快速检查  发现所有的static下面的js都没有使用es6语法 因为这些js也是大多压缩过的代码转义处理后的代码  搜索一下const 就可以知道并不是这里出了问题，

那么问题出在哪， 好了不卖关子了，

问题出在 我在html里面写了一段全局解决苹果手机输入框失去焦点底部空白的js代码 使用了 es6反撇号 模板字符导致第一个报错，显然就是一个格式不对的报错，我注释打包部署之后打开手机果然第一个报错没了，欣慰的心迫不及待解决第二个问题了。

那么第二个问题哪里来呢，const从何而来，经过半天的搜索原来使用的第三方库里面竟然有const 字样，好了我也不替他隐瞒了，尽管他有罪，她叫 vue-pdf 记住是版本3.9的 4.0的已经修复了这个缺陷，也许3.9也修复了 只是下载到我本地的是3.9好久之前安装的 是上一个前端前辈搞得，那么解决方案很简单  重新安装一下这个库不就行了，由于我是虚拟机 连不上外网来回安装插件很麻烦

我就想着能不能把node_modules下面的包有选择的配置一下 也转移一下  于是我在webpack.config.base.js配置了一下

红框中加了 node_modules/vue-pdf

npm run build一下  怀着激动忐忑的心等待，可是npm 不知道是没油了还是发动机坏了，卡了老半天动都不动一下，一会爆出了一个more 500KB类似的警告，明白人都知道 引入的第三方包转化超过了500kB 肯定不可行，所以这条路放弃，直接安装新版本是最可行的，我是直接修改的  三方库源代码  因为就两处比较好修改（这个由于领导不在我没法安装新的安装包传到虚拟机上，这个问上题业务又催的特别紧）另外打包之后的代码和源码有时候会很不同，需要对比前后的代码。

下面就是源码和打包之后代码的图片 当然我已经修改 把里面的const 变成了var

请注意var h=r.firstChild  原先打包之后是 const h=r.firstChild

好了说了那么多就是说了一下我解决问题的思路历程，总而言之还是一句话 es6转es5  输入src代码里面需要转化，static  html  和第三方插件库里面都不允许有es6语法。。仅此而已