ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

如何在手机上查看移动端网页的效果 如何在其他设备访问本机的服务器

2021-10-01 14:34:30  阅读:135  来源: 互联网

标签:网页 访问 端口 防火墙 如何 点击 手机 服务器 本机


在开发移动端项目的时候,我们可能会希望在手机上查看网页在移动端真实的效果。简单的项目只要拷贝到手机打开就可以了,但多数情况下项目会依赖本地服务器运行,这时候就需要让手机能访问到PC的本地服务器。

1. 启动本地服务器并查看监听端口号

如果是用vscode插件Live Server实现的服务器可以在启动网页的地址栏里面找到监听端口号。默认是5500
在这里插入图片描述

2. 打开防火墙

然后打开防火墙,win10用户直接按win+q搜索Windows Defender回车即可。
然后点击新建规则
在这里插入图片描述
点击端口,点击下一步
在这里插入图片描述
在输入框填上你的服务器端口号,点击下一步
在这里插入图片描述
选择允许链接下一步
在这里插入图片描述
然后继续点击下一步,填写描述之后点击完成即可。描述可以随便写。

访问设备在同一局域网

访问服务器的设备必须在同一个局域网下。如果电脑使用以太网,开热点给手机即可,否则用手机开热点给电脑,或者手机电脑连同一个热点也可以。

访问服务器

打开手机的浏览器,输入你的电脑的ipv4地址+端口号即可访问。
例如192.168.1.1:5500
请添加图片描述

排查错误

打开资源管理器(不会找同上文搜索资源管理器),点击网络一栏,展开侦听端口一栏,在这里找到你的服务器端口位置,查看对应的防火墙状态。
在这里插入图片描述
code.exe就是插件Live Server用来启动服务器的程序,是vscode内置的js引擎。
不允许说明程序不允许通过防火墙。
受限制说明端口不开放,也就是刚刚开放防火墙那一步没做好。
如果程序显示不允许,不受限制的话,说明虽然开放了端口,但是不允许启动程序通过防火墙。
这时打开防火墙(搜索防火墙),点击允许应用或功能通过防火墙
在这里插入图片描述
点击更改设置
在这里插入图片描述
找到Visual Studio Code,勾上前面的选框点击确定即可。(为啥有这么多?管他的,全勾上就对了)
在这里插入图片描述
重复上述步骤在手机端访问服务器,到这里一般都会成功,不成功你找我。

标签:网页,访问,端口,防火墙,如何,点击,手机,服务器,本机
来源: https://blog.csdn.net/cffh_/article/details/120577202

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有