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。

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文件如下: