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

作者: MJ 分类: react 发布时间: 2019-06-12 13:26

移动端感觉坑好多,但是也没办法,只能一个一个的填,遇到的场景是:我们是混合开发,需要在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本身包的兼容问题,提倡使用第一种方法

转: https://juejin.im/post/5bab81e0e51d450e85302dd0

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注