在你的本地跑express/vue服务网址是localhost/127.0.0.1,这样只有本地电脑才能访问如果想让你的手机或者其他设备访问必须在同一局域网下一.windows cmd执行ipconfig的结果ipconfig用来查看本机所有网卡的网络参数IP、网关、子网掩码、网卡状态。上面显示这台电脑Wi‑Fi (WLAN) 正常联网有线网、部分虚拟网卡是断开状态。1.无线局域网适配器 本地连接 * 8 / 本地连接 * 10这两个是windows生成的虚拟 Wi‑Fi 适配器热点、旧的 WLAN 实例、虚拟网卡不是你的真实物理无线网卡。“媒体已断开连接” 这个网卡没有接入网络属于闲置不影响上网可以忽略。连接特定的 DNS 后缀为空没有从网络获取域名后缀。出现一堆本地连接 *数字很常见一般是之前开移动热点、VPN、虚拟网卡残留。2. 无线局域网适配器 WLAN真正正在用的 Wi‑Fi 网卡重点IPv4地址192.168.5.10子网掩码255.255.255.0默认网关192.168.5.1IPv4 地址192.168.5.10你电脑在局域网内的内网 IP同路由器下其他设备访问你的电脑就用这个地址。网段是192.168.5.x。子网掩码 255.255.255.0代表局域网范围192.168.5.0 ~ 192.168.5.255。默认网关 192.168.5.1就是你路由器的管理地址所有访问互联网的数据都发给这个网关。浏览器可以直接访问http://192.168.5.1登录路由器后台。IPv6 相关IPv6地址 fd29:36e8::...内网全局 IPv6 地址临时IPv6地址 fd29:36e8::...上网时对外用的临时 IPv6保护隐私会自动变化fe80::b42e:...%10链路本地地址仅局域网内部通信%10 是网卡索引号。3. 以太网适配器 以太网媒体状态媒体已断开连接这是电脑的有线网口插网线的网口没有插网线所以断开。插上网线就会获取 IP。关键信息总结✅ 当前上网方式Wi‑Fi(WLAN)✅ 本机内网 IP192.168.5.10✅ 路由器网关192.168.5.1❌ 有线网口未插网线那两个本地连接*8/*10是虚拟网卡没在用不用管。常用小命令拓展ipconfig /all查看完整信息MAC 地址、DHCP 服务器、DNS 服务器ipconfig /release释放 IPipconfig /renew重新向路由器申请 IP二.如何让你的手机访问你的前端页面保证设备都在一个局域网下连着相同的网因为我的vscodeLive Server 默认只监听127.0.0.1不会监听你的局域网网卡 IP。所以我们先允许局域网的连接1.勾选复选框vscode中ctrl , 打开设置搜索框输入Live Server: Use Local Ip勾选2.完全关闭 Live Server 服务点右下角的端口数字5500停止服务看到 “Server is stopped”。重新启动点击右下角Go Live看右下角状态栏此时服务地址不再是 127.0.0.1会绑定你的局域网 IP192.168.5.10电脑浏览器再次访问http://192.168.5.10:5500/challenge-04-recipe-page-main/index.html如果电脑能打开在尝试变成二维码让手机扫码注意要用手机浏览器扫描而不是微信的扫一扫这个页面是frontend mentor的挑战4可以和专栏里面查看挑战四食谱页面-CSDN博客可以发现用手机已经成功打开了√ 如何让你的手机访问你的服务？
在你的本地跑express/vue服务网址是localhost/127.0.0.1,这样只有本地电脑才能访问如果想让你的手机或者其他设备访问必须在同一局域网下一.windows cmd执行ipconfig的结果ipconfig用来查看本机所有网卡的网络参数IP、网关、子网掩码、网卡状态。上面显示这台电脑Wi‑Fi (WLAN) 正常联网有线网、部分虚拟网卡是断开状态。1.无线局域网适配器 本地连接 * 8 / 本地连接 * 10这两个是windows生成的虚拟 Wi‑Fi 适配器热点、旧的 WLAN 实例、虚拟网卡不是你的真实物理无线网卡。“媒体已断开连接” 这个网卡没有接入网络属于闲置不影响上网可以忽略。连接特定的 DNS 后缀为空没有从网络获取域名后缀。出现一堆本地连接 *数字很常见一般是之前开移动热点、VPN、虚拟网卡残留。2. 无线局域网适配器 WLAN真正正在用的 Wi‑Fi 网卡重点IPv4地址192.168.5.10子网掩码255.255.255.0默认网关192.168.5.1IPv4 地址192.168.5.10你电脑在局域网内的内网 IP同路由器下其他设备访问你的电脑就用这个地址。网段是192.168.5.x。子网掩码 255.255.255.0代表局域网范围192.168.5.0 ~ 192.168.5.255。默认网关 192.168.5.1就是你路由器的管理地址所有访问互联网的数据都发给这个网关。浏览器可以直接访问http://192.168.5.1登录路由器后台。IPv6 相关IPv6地址 fd29:36e8::...内网全局 IPv6 地址临时IPv6地址 fd29:36e8::...上网时对外用的临时 IPv6保护隐私会自动变化fe80::b42e:...%10链路本地地址仅局域网内部通信%10 是网卡索引号。3. 以太网适配器 以太网媒体状态媒体已断开连接这是电脑的有线网口插网线的网口没有插网线所以断开。插上网线就会获取 IP。关键信息总结✅ 当前上网方式Wi‑Fi(WLAN)✅ 本机内网 IP192.168.5.10✅ 路由器网关192.168.5.1❌ 有线网口未插网线那两个本地连接*8/*10是虚拟网卡没在用不用管。常用小命令拓展ipconfig /all查看完整信息MAC 地址、DHCP 服务器、DNS 服务器ipconfig /release释放 IPipconfig /renew重新向路由器申请 IP二.如何让你的手机访问你的前端页面保证设备都在一个局域网下连着相同的网因为我的vscodeLive Server 默认只监听127.0.0.1不会监听你的局域网网卡 IP。所以我们先允许局域网的连接1.勾选复选框vscode中ctrl , 打开设置搜索框输入Live Server: Use Local Ip勾选2.完全关闭 Live Server 服务点右下角的端口数字5500停止服务看到 “Server is stopped”。重新启动点击右下角Go Live看右下角状态栏此时服务地址不再是 127.0.0.1会绑定你的局域网 IP192.168.5.10电脑浏览器再次访问http://192.168.5.10:5500/challenge-04-recipe-page-main/index.html如果电脑能打开在尝试变成二维码让手机扫码注意要用手机浏览器扫描而不是微信的扫一扫这个页面是frontend mentor的挑战4可以和专栏里面查看挑战四食谱页面-CSDN博客可以发现用手机已经成功打开了√