手机怎么访问电脑的本地的移动端项目?超级简单,这篇文章直接搞定

#手机怎么访问电脑的本地的移动端项目
作为一名开发或者运维的同学,平时都在电脑上F12开启手机适配模式,去调整代码和样式,有时候出于更严谨的方式,我们需要使用真机来调试样式,由于代码在本地的环境,没有上传到服务器,所以我们需要,手机怎么去开启访问本地的移动端项目呢?
#第一步:重点先确保你的手机和电脑连在同一个局域网内
把手机和电脑的网段IP,使用同一网络大致有几种:手机和电脑同时连接的WiFi,电脑连接手机的热点。
#第二步:查看的电脑的IP
通过电脑开启一个 WIFI 来供手机进行连接,形成一个小的局域网,然后就通过局域网的 IP地址(查询 IP 地址,cmd——》ipconfig), 通过 IP 地址来进行自己本地服务器中的项目访问。
找到IPv3
#第三步:启动本地项目

在这里插入图片描述
上图是启动本地项目的地址
#第四部:
手机浏览器或者微信直接输入这个Network地址,拼接需要跳转的路由信息,即可查看本地的项目页面。
#后续:假如上免得配置没问题还是出现无法访问的情况
在这里插入图片描述
出现该问题主要是因为你电脑的防火墙将某些端口号的 htpp 的网络访问协议给屏蔽掉了(一般的电脑操作系统是默认不屏蔽 80,8080 一些常用的端口的),所以你可以直接将自己的电脑的防火墙全部关闭。然后就可以完美访问了。具体设置路径给一下(方便菜鸟使用):控制面板 \ 所有控制面板项 \ Windows 防火墙 \ 自定义设置。
##请参照这个方案解决
我们可以直接在防火墙中将 80 和 8080 端口设置为不屏蔽即可。具体操作如下,首先进入到 windows 防火墙面板,点击高级设置
在这里插入图片描述

进入到高级设置界面,分别在入站规则和出站规则中新建规则,选择端口,点击下一步,然后直接在对应的输入框中输入 80,然后默认点击下一步,完成。同样设置 8080 的这样一个规则。整个设置完成过后,手机就可以通过局域网来进行 ip 地址的访问了。
在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
为了在本地搭建服务器来运行静态网页,你可以使用Express模块来构建一个简易的静态服务器。以下是一个简单的步骤: 1. 首先,你需要在你的项目文件夹下创建一个新的JavaScript文件,可以命名为server.js或其他你喜欢的名称。 2. 在server.js文件中,你需要引入Express模块,并创建一个Express应用程序实例。可以使用以下代码: ```javascript const express = require('express'); const app = express(); ``` 3. 然后,你需要指你的静态文件的目录。假设你的静态文件都放在一个名为public的文件夹下,你可以使用以下代码将public文件夹设置为静态文件目录: ```javascript app.use(express.static('public')); ``` 4. 接着,你需要指服务器监听的口号。你可以使用以下代码指一个口号,比如3000: ```javascript const port = 3000; app.listen(port, () => { console.log(`服务器运行在 http://localhost:${port}`); }); ``` 5. 最后,在命令行中运行`node server.js`启动你的服务器。 6. 现在,你可以通过在浏览器中输入`http://localhost:3000`来访问你的静态网页了。如果你的入口文件是index.html,你可以直接访问`http://localhost:3000`;如果入口文件是其他名称的HTML文件,比如demo.html,你可以通过`http://localhost:3000/demo.html`来访问。 这样,你就可以通过本地搭建的服务器来运行你的静态网页了。请注意,这只是一个简单的示例,你可以根据你的具体需求进行调整和扩展。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [nodejs构建本地web测试服务器 如何解决访问静态资源问题](https://download.csdn.net/download/weixin_38723516/14007532)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [本地搭建简单服务器运行静态页面](https://blog.csdn.net/xilejie/article/details/131312678)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值