vscode插件live server无法在手机预览调试H5网页

环境

Window10、vscode:1.94.2、Live Server:v5.7.9、Live Server (Five Server):v0.3.1

问题

PC端预览没有问题,但是在手机点击链接显示访问失败

排查

1. 是否同一局域网

意思就是电脑、手机是不是访问同一个网络。电脑插得是办公室的网线,手机连得是办公室的wifi,确实是同一个局域网

如果你手机用的自己流量,那连上公司wifi问题就解决了

2. 链接问题

如果手机端报错显示:"该网页无法正常运作,127.0.0.1未发送任何数据"

那就是访问链接的问题,这个链接并不像webpack那种打包出来的链接

bash 复制代码
http://127.0.0.1:5500/

打包工具打包出来的链接

bash 复制代码
http://192.168.x.x:3000

那怎么能拿到第二种的访问链接呢?

这里,我推荐方式二

  • 方式一:打开设置,配置一下插件的liveServer.settings.useLocalIp,设置为true

  • 方式二:不使用live server跑服务,使用Live Server (Five Server),插件市场下载这个插件。它会直接显示终端

根据上面改了链接,但是手机还是无法访问不了

3. 防火墙

看看同事能不能访问我的链接,结果发现不能;

但是我用webpack开启的服务(一些vue项目),同事就可以访问链接。

同事用nginx开启一个本地服务,他手机也能访问,我电脑也能访问。

应该是vscode不小心关闭防火墙通信,那只要开启就行了:

  1. 点开电脑左下角的搜索,搜索:防火墙

  2. 选择"高级设置"

  3. 选择入站规则,找到"Visual Studio Code ",双击,勾选:允许链接

全部设置完了后,关闭服务,重新再开启一个服务,手机端可以访问链接了

相关推荐
等不到来世17 小时前
vscode设置默认终端terminal为git bash
vscode·terminal
Skrrapper1 天前
【编程史】IDE 是谁发明的?从 punch cards 到 VS Code
c++·ide·vscode
LIN-JUN-WEI2 天前
[ESP32]VSCODE+ESP-IDF环境搭建及blink例程尝试(win10 win11均配置成功)
c语言·开发语言·ide·vscode·单片机·学习·编辑器
iphone1082 天前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
织_网2 天前
Visual Studio Code 中统一配置文件在团队协作中的应用
ide·vscode·编辑器
一只小风华~2 天前
Web前端开发: :has功能性伪类选择器
前端·html·html5·web
到底起什么网名才能不重名3 天前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
长路 ㅤ   3 天前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
张晓~183399481213 天前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
xhload3d3 天前
智慧航天运载体系全生命周期监测 | 图扑数字孪生
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·工控·航空航天·火箭升空·智慧航空·智慧航天·火箭发射·火箭回收