前端html页面,手机查看

Posted 2022-08-10 wukaibk

在写前端页面中，经常会在浏览器运行html页面，从本地文件夹中直接打开的一般都是file协议，当代码中存在http或https的链接时，HTML页面就无法正常打开，为了解决这种情况，需要在在本地开启一个本地的服务器。
本文是利用node.js中的http-server，开启本地服务，步骤如下：

1 下载node.js

官网地址： https://nodejs.org
下载完成后在命令行输入命令$ node -v以及$ npm -v检查版本，确认是否安装成功。

　　

2 下载http-server

在终端输入：
npm install http-server -g

　　

3 开启 http-server服务

终端进入目标文件夹，然后在终端输入：

http-server -c-1   （??只输入http-server的话，更新了代码后，页面不会同步更新）
Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://192.168.8.196:8080
Hit CTRL-C to stop the server

　　

4 关闭 http-server服务

按快捷键CTRL-C
终端显示^Chttp-server stopped.即关闭服务成功。

　

4 这时候打开页面无法正常显示,终端给出提示

[Wed Aug 21 2019 07:27:19 GMT+0800 (GMT+08:00)] "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/7575.0.3770.100 Safari/537.36" .0.3770.100 Safari/537.36" .0.3770.100 Safari/537.36"
[Wed Aug 21 2019 07:29:43 GMT+0800 (GMT+08:00)] "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36".0.3770.100 Safari/537.36"

4 解决办法

 4.1:装anywhere！然后在要设置的目录下 运行anywhere!就可以解决了！ anywhere可以打开静态页面

 4.2:anywhere安装命令：npm install -g anywhere

 4.3:使用：在要启动静态服务的目录下执行

 4.4:anywhere -p 8080

PS C:\\Users\\ASUS\\Desktop\\working\\demo> anywhere -p 8080
Running at http://192.168.43.134:8080/
Also running at https://192.168.43.134:8081/

4 最后一步,在端口号后面添加要打开的文件,手机端输入地址也可以访问这个页面了

　　

http://192.168.43.134:8080/index.html

5 吃水不忘挖井人,借鉴了以下网站

https://www.cnblogs.com/nolaaaaa/p/9126385.html

https://blog.csdn.net/weixin_40836227/article/details/99710001