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

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

3. 防火墙

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

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

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

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

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/56337.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信互助学习平台(lw+演示+源码+运行)

摘要 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了微信互助学习平台的开发全过程。通过分析微信互助学习平台管理的不足,创建了一个计算机管理微信互助学习平台的方案。文章介绍了微信互助学习平台的…

performance.timing

performance.timing 是 Web 性能 API 的一部分,用于获取页面加载过程中的各个时间戳。这些时间戳可以帮助开发者分析页面加载性能,找出潜在的瓶颈。performance.timing 返回一个 PerformanceTiming 对象,该对象包含了多个属性,每个…

论文精读:TiC-CLIP: Continual Training of CLIP Models(一)

论文精读:TiC-CLIP: Continual Training of CLIP Models(一) 论文介绍 在多模态学习领域,CLIP(Contrastive Language-Image Pre-training)模型因其在图像和文本联合嵌入方面的卓越性能而受到广泛关注。然而&#xff0…

【C++】vector(1)

😈个人主页: 起名字真南 😈个人专栏:【数据结构初阶】 【C语言】 【C】 目录 引言1 vector 的基本知识1.1 vector 的特点 2 vector 的主要功能和操作2.1 vector 的构造2.2 vector 的增删改查2.3 vector 的容量 引言 在C的标准模板库(STL&…

MySQL——数据库

什么是数据库 数据库(DB , DataBase)概念:数据仓库,软件,安装在操作系统(window,linux,max,...)之上学习数据库最重要的就是学习SQL语句存储500万以下的数据…

鸿蒙HarmonyOS————ArkTs介绍(1)

最近除了人工智能,还有一个很火的HarmonyOS,HarmonyOS是华为公司开发的一款面向全场景的分布式操作系统,旨在为消费者提供跨设备无缝协同体验。它支持多种智能终端设备,包括但不限于智能手机、平板电脑、智能穿戴设备、智能家居设…

<Project-11 Calculator> 计算器 0.3 年龄计算器 age Calculator HTML JS

灵感 给工人发工资是按小时计算的,每次都要上网,我比较喜欢用 Hours Calculator ,也喜欢它的其它的功能, 做个类似的。 我以为是 Python,结果在学 javascript 看 HTML,页面的基础还停留在 Frontpage 2000…

【学术论文投稿】自动化运维:解锁高效运维的密钥

【连续三届IEEE出版|EI检索】第三届图像处理、计算机视觉与机器学习国际学术会议(ICICML 2024)_艾思科蓝_学术一站式服务平台 更多学术会议请看:https://ais.cn/u/nuyAF3 目录 引言 一、自动化运维概述 1. 自动化运维的定义 2. 自动化运…

Qt中使用线程之QRunnable

1、自定义1个子类继承自QRunnable 2、重写run方法,编写子线程的业务逻辑 3、使用QThreadPool的全局方法来开启这个线程 4、线程的回收不需要关注,由QThreadPool处理 5、缺点:无法使用信号槽机制 6、适合一些不需要和主线程通信的耗时的任…

SpringBoot中大量数据导出方案:使用EasyExcel并行导出多个excel文件并压缩zip后下载

文章目录 前言一、控制器层代码二、服务层代码三、代码亮点分析 前言 SpringBoot的同步excel导出方式中,服务会阻塞直到Excel文件生成完毕,如果导出数据很多时,效率低体验差。有效的方案是将导出数据拆分后利用CompletableFuture,…

集成Spring Security详解

集成Spring Security详解 一、Spring Security简介 Spring Security是一个功能强大且高度可定制的身份验证和访问控制框架,它专注于为Java应用程序提供全面的安全解决方案。作为Spring项目的一部分,Spring Security继承了Spring框架的灵活性和可扩展性…

【图论】(四)最小生成树与拓扑排序

最小生成树与拓扑排序 最小生成树之prim(P算法)相关概念结题思路拓展 最小生成树之kruska(K算法)过程模拟程序实现拓展 拓扑排序背景与思路模拟过程程序实现 最小生成树之prim(P算法) 相关概念 P算法是用…

R语言数据分析案例:电影评分数据的探索性分析

# R语言数据分析案例:电影评分数据的探索性分析 在本案例中,我们将使用R语言对一份电影评分数据集进行探索性分析,主要包括数据清洗、可视化、描述性统计等环节,以了解数据的基本特征和趋势。假设我们使用的是一个电影评分数据集…

『完整代码』坐骑召唤

创建一个按钮 作为召唤/消失坐骑的开关 将预制体放入指定文件夹 命名为Mount01 创建脚本并编写:CallMount.cs using UnityEngine; using UnityEngine.UI; public class CallMount : MonoBehaviour{public Button callBtn;GameObject mountPrefab;GameObject mountIn…

CentOS7 上安装GitLab的经历

一、安装必要的基础环境 1.安装依赖包 [rootgitlab-server ~]#yum install curl policycoreutils openssh-server openssh-clients postfix wget git patch -y [rootgitlab-server ~]# systemctl start postfix 2.配置yum源(由于网络问题,国内用户请使用清华大学…

循序渐进丨MogDB 5.0 远程访问 MogDB/Oracle 数据库的简便方法(使用@符号)

概述 早期的 MogDB 就提供了Postgres_fdw、Oracle_fdw、MySQL_fdw3个插件,用于远程访问 MogDB/Oracle/MySQL数据库。 旧的版本中,访问远程数据库的表,需要显式创建外部表,而在 MogDB 5.0当中,这种用法得到了简化&…

导数的概念及在模型算法中的应用

一. 导数概念与计算 1. 导数的物理意义: 瞬时速率。一般的,函数yf(x)在x处的瞬时变化率是 2. 导数的几何意义: 曲线的切线,当点趋近于P时,直线 PT 与曲线相切。容易知道,割线的斜率是当点趋近于 P 时&…

数字孪生:引领智慧农业的未来

在现代农业中,数字化与智能化的浪潮正在改变传统的种植方式。数字孪生技术作为一种创新的数字化解决方案,正在深刻改变智慧农业的面貌,尤其是在大棚智能控制、数据全面可视、加工过程监控和物流运输溯源等方面展现出巨大的潜力。 frontop数字…

Golang使用viper读取配置到结构体,但是获取的数据为空

1.viper库 viper库是一个读取配置文件的库,支持多种配置文件,如JSON/TOML/YAML/HCL/envfile/Java properties 等 2.遇到的问题 在使用viper库的时候发现按照相应的配置已经读取到了对应的配置,但是转换为结构体的时候发现怎么拿结构体里面…

更改了 daemon.json ,需要重新启动docker容器吗

当你更改了 daemon.json 文件后,通常需要重启 Docker 服务以使更改生效,而不是重启单个 Docker 容器。以下是具体步骤: 保存并关闭 daemon.json 文件: 确保你已经完成了对 daemon.json 文件的修改并保存了更改。 重启 Docker 服务…