环境
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不小心关闭防火墙通信,那只要开启就行了:
-
点开电脑左下角的搜索,搜索:防火墙
-
选择“高级设置”
-
选择入站规则,找到“Visual Studio Code”,双击,勾选:允许链接
全部设置完了后,关闭服务,重新再开启一个服务,手机端可以访问链接了