同一局域网下 实现手机网页与桌面端代码联调

首先我们要知道的是,在同一ip局域网下,我们的主机与主机之间是可以相互访问的

那么我们应该如何实现从电脑上面写代码,手机真机看页面呢?

1、关掉电脑端的防火墙

同一局域网下 实现手机网页与桌面端代码联调
首先我们搜索防火墙,如果你没有配置过打开之后应该是这样一个状态
同一局域网下 实现手机网页与桌面端代码联调
点进去关关关,三个全部关掉
同一局域网下 实现手机网页与桌面端代码联调
这个时候,第一步就已经完成了。

2、开启我们的vue项目(我这边使用的是vue,如果想其他的话可能是默认打开localhost,或者手动打开localhost、127.0.0.1,这时我们就要查看一下我们的ip局域网地址)

同一局域网下 实现手机网页与桌面端代码联调
这是我们vue启动的项目,默认就会有两个网址,我们默认点开下面那个网址其实也就是我们的主机地址,
我们也可以用另外一种方式获取ip地址
win+r 打开终端输入ipconfig
同一局域网下 实现手机网页与桌面端代码联调
这ipv4就是我们的局域网地址
打开网页 正常显示说明也就成功了
同一局域网下 实现手机网页与桌面端代码联调

3、这个时候我们要保证 手机无线和电脑无线保存在一个网络环境下,如果是台式主机的话自己电脑上下载一个360免费wifi,电脑开wifi 手机连。

同一局域网下 实现手机网页与桌面端代码联调
同一局域网下 实现手机网页与桌面端代码联调

4、接下来就到了关键的一步了,就是直接用谷歌插件,我这边装了一个自动生成二维码插件(大家可以去谷歌应用商城下载)

同一局域网下 实现手机网页与桌面端代码联调
扫码后实现的效果
同一局域网下 实现手机网页与桌面端代码联调
这个时候,就已经大功告成啦。