vuejs - 在某些安卓机下(特别是huawei)用自带的浏览器,显示空白页的解决办法

感慨一下: 想解决这个问题需要:

1. 有一些安卓的知识 (ADB,  android studio, log)

2. 有 vuejs 的知识 ( es, )

3. 知道如何抓包(charles)

4. 知道如何google / baidu

5. 知道如何部署 ( linux , ssh, nginx , capistrano ) .

我们发现,最近上的一个, 在安卓的手机上, 部分机型显示空白页.

通过抓包, 发现一切正常. (对于正常的 http 协议, 可以直接抓包)

对于https 协议, 使用charles ,配置好 SSL proxy 之后,也可以抓包

没办法了, 只有查看手机浏览器的 logo

打开 android studio, 插入USB连接手机, 然后看LOG. 满屏幕, 根本没法看.

于是:

1. 找到 浏览器对应的 process ID

2. 或者找到对应的 vivo browser 关键字,

于是做过滤, 然后查看 LOG, 发现报错:  undefined xxx.js: 23

找到这个 js 的23行, 发现是一个 es6-promise的声明组件. 所以怀疑是否是由于 es6 造成的.

百度一下, 发现很多帖子: https://blog.csdn.net/genius_yym/article/details/80348828

按照帖子中介绍的:

1. package.json 中, 增加: (貌似这个可以自动增加... 记得把它提交到 git 中)

"dependencies": {
     "babel-polyfill": "^6.26.0",
    /...
}

2. 运行命令:    $ npm install babel-polyfill --save

3. 在  src/main.js  中增加:

import 'babel-polyfill'
import Es6Promise from 'es6-promise'

Es6Promise.polyfill()

4. 运行  nvm use 10.8.0  (记得这里务必是正确的版本号. 我的机器上默认的版本是 node 5.8.0, 所以一直在报错)

5. nvm run dev,  或者 nvm run build  就可以了.