APP内嵌h5页面在android低版本出现白屏问题(vue项目)

前段时间在处理一个vue项目时, 在vivo和华为的android5.0系统出现白屏,没有任何报错信息, 之后特地买了两台真机进行测试, 经过分段调试 , 一步步排查, 最后发现是这段代码出错:

到底什么问题? 对比一下这段代码

很明显, 参数默认值的问题! 也就是ES6语法不兼容!
但实际上不完全是, 在这个项目中,有不少类似箭头函数这种语法, 通通都是支持的.实际上项目中是有babel进行转码.

那到底是怎么回事呢?

我们都知道,babel是一个转译器，可以把同种语言的高版本规则翻译成低版本规则, 一般在项目根目录下会有一个 .babelrc 文件, 用于默认解析 ES2015(es6) 中的特殊语法, 像 let,const, => 等等;

而babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。
所以需要使用 babel-polyfill，为当前环境提供一个垫片，需要在Webpack中配置babel-loader。

具体操作如下:

1. 如果没有安装babel转码规则,需要先安装,

ES2015转码规则
npm install --save-dev babel-preset-es2015

ES6+不同阶段语法提案的转码规则（共有4个阶段），选装一个就可以了
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$npm install --save-dev babel-preset-stage-2

配置babel转码规则, .babelrc文件如下:

{
   
   
  "presets": [
    ["env", {
   
   
      "modules": false,
      "targets": {
   
   
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }