h5 android5.0白屏,react/vue在某些低版本安卓手机浏览器白屏解决办法

移动端感觉坑好多，但是也没办法，只能一个一个的填，遇到的场景是：我们是混合开发，需要在app内访问h5页面(基于react，其实vue中也是一样的问题)，测试人员提出了在vivo X7中打开空白，仔细看了下，public中的index.html页面加载了，只是往#root这个div中挂载的时候是失败的，空白就产生了，但是直接用手机自带的浏览器就没事，在app内用原生写的浏览器就不行。

查了一下是这些手机上的浏览器兼容问题，这些浏览器版本太低，不兼容es6新特性。

Babel默认只转换新的JavaScript句法,对于ES6的新API，如erator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise、Async，以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。

对于react,是引用import React from 'react'里面的有些方法不兼容，解决方案大致分为两种：

1.下载core-js，即可解决

$ npm install core-js

2.在入口js文件引入

import 'core-js/fn/Map';

import 'core-js/fn/set';

使用babel-polyfill，缺点就是包本身太大；优点是可以为当前环境提供一个垫片，几乎可以兼容所有的浏览器 。

1.下载babel-polyfill

$ npm install --save babel-polyfill

2.在入口js文件最上面引入 (建议放在入口文件的最顶部)

import 'babel-polyfill'

两种方法，按照上面步骤再次执行完后运行就可以了

提示：如果只是纯粹的想解决react本身包的兼容问题，提倡使用第一种方法

欢迎关注小程序，感谢您的支持！