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

news/2024/10/28 17:51:40/

环境

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跑服务,使用Live Server (Five Server),插件市场下载这个插件。它会直接显示终端
    在这里插入图片描述
    在这里插入图片描述

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

3. 防火墙

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

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

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

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

  1. 点开电脑左下角的搜索,搜索:防火墙
    在这里插入图片描述

  2. 选择“高级设置”
    在这里插入图片描述

  3. 选择入站规则,找到“Visual Studio Code”,双击,勾选:允许链接
    在这里插入图片描述

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


http://www.ppmy.cn/news/1542647.html

相关文章

面试中的一个基本问题:如何在数据库中存储密码?

面试中的一个基本问题:如何在数据库中存储密码? 在安全面试中,“如何在数据库中存储密码?”是一个基础问题,但反映了应聘者对安全最佳实践的理解。以下是安全存储密码的最佳实践概述。 了解风险 存储密码必须安全&am…

【数据仓库】数据仓库面试题

简单整理了一下题目和答案,希望对大家有所帮助。 第一面:基础技术与概念 什么是ETL?请解释ETL过程中的每个步骤。 ETL是Extract, Transform, Load的缩写,用于描述将数据从源系统提取、转换为适合分析的形式、最后加载到目标系统的…

华为OD机试真题---磁盘容量排序

华为OD机试中的“磁盘容量排序”题目是一道考察应聘者编程能力和算法理解的经典题目。以下是对这道题目的详细解析: 一、题目描述 磁盘的容量单位常用的有M,G,T这三个等级,它们之间的换算关系为1T1024G,1G1024M&…

【js逆向专题】12.RPC技术

目录 一. websocket1. 什么是websocket2. websocket的原理3. websocket实现方式1. 客户端2.服务端3. 实际案例1. 案例目标2. 解析思路 二. RPC1. RPC 简介2.Sekiro-RPC1. 使用方法1. 执行方式2.客户端环境3.使用参数说明 2. 测试使用1. 前端代码2. SK API3.python调用代码 三.项…

matlab逻辑与有两种表达

在 MATLAB 中,要判断一个数值是否同时满足小于等于 44 和大于等于 15,你可以使用逻辑与运算符 &&(在 if 语句中)或 &(在数组逻辑运算中)。以下是如何在 if 语句中进行这种判断的例子&#xff1…

攻防世界的新手web题解

攻防世界引导模式 1、disabled_button 好&#xff0c;给了一个按钮&#xff0c;第一道题目就不会做 看的wp<input disabled class"btn btn-default" style"height:50px;width:200px;" type"submit" value"flag" name"auth&q…

Python中的Pyqt5详细介绍:基本机构、部件、布局管理、信号与槽、跨平台

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…