问题描述:
在项目中发现在华为荣耀6手机上,出现页面白屏,抓包后显示接口调用并没有执行,查找后认为是android版本过低(升级测试android4.4.2已是华为荣耀6的最新系统)。
华为荣耀6:android版本4.4.2
接口请求是用axios + promise方式进行请求的封装。
查找后发现是说axios不兼容造成的,但是axios又是基于es6中promise用于浏览器和node.js的http客户端,总而言之,就是android版本过低造成的,有说需要安装babel-polyfill就可以了,但为了保险起见,把es6的用于兼容es5的es6-promise也安装了,具体操作如下:
1.安装
npm install babel-polyfill
npm install es6-promise
2.main.js添加引用
import 'babel-polyfill'
import Vue from 'vue'
import Es6Promise from 'es6-promise'
require('es6-promise').polyfill()
Es6Promise.polyfill()
但会报如下错误:
意为:重复引用了babel-polyfill,所以要注释掉引入import ‘babel-polyfill’。
注释掉对于’babel-polyfill’的引用即可。
3.修改webpack.base.conf.js
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
"babel-polyfill":"babel-polyfill",
app: './src/main.js'
},
········
}
但是即使执行以上的操作,在页面布局上如果使用新的标签或特性,还是会出现页面兼容的问题。