本文已参与「新人创作礼」活动,一起开启掘金创作之路。
公司安排任务做H5页面,自己写是在浏览器上查看效果,而产品检验需要在手机上演示,直接手机端打开html文件会找不到本地引用的图片等资源。那么如何用手机查看本地的H5页面呢?
主要是借助nodejs 的第三方模块:anywhere
1. 打开项目文件
2. 右键 Git Bash Here 打开终端 或者直接在vs code项目页面打开终端
注意: 电脑要安装好node
。
3. 输入命令安装anywhere模块。 npm install anywhere -g 回车
4. 然后再输入命令 anywhere
anywhere可以加上设置的端口号,至于电脑本地端口号,我之前的文中介绍过,网上也有很多可查。
5. 得到一个网址 手机浏览器输入此网址即可查看本地h5页面
注意: 手机要和电脑使用同一个局域网
我刚开始弄有一个报错现象,网上找了一些答案,说是在电脑上cmd 刷新dns之类的,但是我设置了也没有效果,一番检查后是端口问题,anywhere默认的端口号是8000。
在anywhere后面设置端口号即可解决这个问题。
比如要打开这个test.html页面,在pc端点击后进入该页面,复制网址。此时手机端就可以直接打开这个网址了,到这里就解决了手机端如何打开本地html文件的问题。
并且pc端修改页面,手机端也可以实时刷新观看页面效果。
总结:
主要是借助 anywhere模块,pc端要同时要安装node,安装好anywhere模块后,再设置端口,即可实现手机查看pc页面效果,要注意连同一个局域网。