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那种打包出来的链接

http://127.0.0.1:5500/

打包工具打包出来的链接

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”，双击，勾选：允许链接
   

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