手机浏览器打开本地H5/html文件

1,778 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

公司安排任务做H5页面,自己写是在浏览器上查看效果,而产品检验需要在手机上演示,直接手机端打开html文件会找不到本地引用的图片等资源。那么如何用手机查看本地的H5页面呢?

主要是借助nodejs 的第三方模块:anywhere

1. 打开项目文件 

2. 右键  Git Bash Here 打开终端 或者直接在vs code项目页面打开终端

注意: 电脑要安装好node

3. 输入命令安装anywhere模块。  npm install anywhere -g  回车

image.png

4. 然后再输入命令  anywhere

anywhere可以加上设置的端口号,至于电脑本地端口号,我之前的文中介绍过,网上也有很多可查。

image.png

5. 得到一个网址  手机浏览器输入此网址即可查看本地h5页面

注意: 手机要和电脑使用同一个局域网

我刚开始弄有一个报错现象,网上找了一些答案,说是在电脑上cmd 刷新dns之类的,但是我设置了也没有效果,一番检查后是端口问题,anywhere默认的端口号是8000。

image.png 在anywhere后面设置端口号即可解决这个问题。

image.png 比如要打开这个test.html页面,在pc端点击后进入该页面,复制网址。此时手机端就可以直接打开这个网址了,到这里就解决了手机端如何打开本地html文件的问题。

7c9cca0a29c5980ce28f8cba789f084.jpg

并且pc端修改页面,手机端也可以实时刷新观看页面效果。

总结:

主要是借助 anywhere模块,pc端要同时要安装node,安装好anywhere模块后,再设置端口,即可实现手机查看pc页面效果,要注意连同一个局域网