2018.04.24
#
#
最近用 vue 做了一个 web 音乐 App, 想看看在手机端的样子。
因为之前都是使用草料二维码查看, 但是最近使用草料二维码的时候报错,页面显示不了。于是就想使用 chrome 真机调试 web 页面,发现手机端的页面还是显示不了。
于是就开启了一段填坑之路。
1.以下是手机端报错信息
采用 chrome 真机调试,使用 pc 的 ip,手机端依然不能访问。但是手机端访问 百度首页,却正常。
2、于是自己采用了以下方式:
- 关闭防火墙
- 关闭杀毒软件
- 还专门下了猎豹 wifi,就是为了处于同一个网段下,手机通过连接 pc 上的 wifi。
可以依然,没有作用。
3、进一步处理
- 经过测试发现:在 pc 上,发现使用 localhost:8080。 pc可以访问项目。但是使用 192.168.1.101:8080 pc 就不能访问项目。
- pc 和手机使用数据线链接之后,手机端使用 localhost:8080 和 192.168.1.101:8080 都不能访问,就出现了上面的报错信息。
4、于是问题就在于,怎么让 pc 端通过 ip 来访问项目。
通过询问,终于知道了方法。由于本项目是采用的vue, 服务端是 express 。修改如下:
通过修改之后,PC就可以通过 ip 来访问项目了。
5、chrome 真机调试就成功了。注意事项如下:
- PC 和 手机端都必须采用 pc的ip来访问项目,采用localhost会失败。(因为pc和手机的localhost都是相对自身的)
- pc 和手机通过数据线连接。(不需要处于同一个网路哦)
- pc 和手机端都必须是 chrome 浏览器
- 手机安装相应机型的USB驱动,(如果电脑上安装有百度手机助手、360手机助手这类软件,一般连接后可以自动安装相应的USB驱动程序)
6、如果草料二维码的报错处理
自己刚开始的时候,把localhost 修改为 pc 的 ip ,手机上扫二维码依然不能查看,最终修改了服务端的设置,才成功。如何修改,请见上面第二张图片。
自己之前在使用vue-cli 做项目的时候,使用草料二维码,只要将localhost 修改为 ip, 使用手机扫一扫,就可以查看,但是最近好像vue-cli有变化,还要同时修改 config 目录下的 index.js 文件中的 host。也就是将 localhost 修改为 ip。
注意:草料二维码,需要手机和 pc 处于同一个网络下。
具体如何操作的请见:
- 参考链接:
Chrome浏览器真机调试web页面