live Server配置之open-with-Live-Server 无法打开浏览器改用Preview on Web Server插件正常打开浏览器

最新推荐文章于 2026-06-19 11:57:51 发布
原创 最新推荐文章于 2026-06-19 11:57:51 发布 · 3k 阅读 · 5 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#javascript #node.js
本文介绍了如何在Visual Studio Code中，由于Live-Server无法正常打开浏览器，转而使用PreviewonWebServer插件进行配置和设置默认浏览器以及自定义端口号，以实现网页预览功能。详细步骤包括插件的安装以及在编辑页面右击通过vscode-preview-server:launchonbrowser命令启动浏览器预览。

live Server配置之open-with-Live-Server 无法打开浏览器改用Preview on Web Server插件正常打开浏览器

Preview on Web Server插件安装

参考： https://blog.csdn.net/zhouwei_doris/article/details/80604604

配置 插件Preview on Web Server的端口号

在这里插入图片描述
添加默认浏览器和设置端口号：
在这里插入图片描述
回到Visual Studio Code编辑页面，右击，选择 vscode-preview-server:launch on browser
在这里插入图片描述
即可打开浏览器预览界面了。

信息世界
关注
vscode-preview-server:实时预览VSCode扩展
05-02
vscode预览服务器 特征 该扩展提供了在Web服务器上执行HTML预览。 保存文件时，此扩展名会自动重新加载浏览器或侧面板（实时预览功能）。 您可以从上下文菜单或编辑器菜单调用这些功能。 主要功能如下。 Preview on side panel (ctrl+shift+v) ：在侧面板上打开HTML预览。 使用此功能，您可以轻松检查HTML，CSS和JavaScript的操作。 Launch on browser (ctrl+shift+l) ：在默认浏览器上打开网页。 您可以通过网页检查所有操作。 Stop the web server (ctrl+shift+s) ：停止Web服务器。 此功能只能在命令面板中使用。 Resume the web server (ctrl+shift+r) ：恢复Web服务器。 此功能只能在命令面板中使用。 show UI Page (c
vs-code插件 -- Preview on Web Server 插件 使用 及设置默认浏览器
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
03-25 1万+
vs-code插件 -- Preview on Web Server 插件 使用 及设置默认浏览器
VScode open with live Server 没反应解决办法，查看端口占用
Libra99WU的博客
09-12 1万+
VScode直接官网下载安装很方便，可以安装很多插件，在下面图里画圈的点击进去搜索下载 中文插件 第一款 样式插件 第三个 模拟线上的插件 我在安装之后出现一些小问题 找了一些解决办法，首先点击liveServer的设置按钮有个扩展复制，点击进去，会有在seetings.json中编辑，点击进去， 复制下方代码 { "files.autoSave": "afterDelay", "files.autoSaveDelay": 500, "liveServer.settings.CustomBrowser"
Preview on Web Server 插件
初心 - 杨瑞超个人博客
07-30 7217
欢迎加入qq群(IT-程序猿-技术交流群)：757345416 Preview on Web Server 个人认为是一个非常好用的插件，他可以让你预览的web界面同步手机，浏览器，互相同步，达到非常好的测试效果。安装方法如下： 1、点击扩展 2、搜索 Preview on Web Server 3、点击安装 4、安装成功后点击重新加载 5、ok 详情见下图： 下载完成...
搭建Vue开发环境——并解决vs code右键没有Open With Live Server，Open With Live Server没反应等问题
weixin_74261569的博客
12-21 3687
搭建Vue开发环境——并解决vs code右键没有Open With Live Server，Open With Live Server没反应等问题
5个实用技巧：用VS Code Live Preview插件让网页开发效率翻倍
gitblog_00064的博客
06-09 373
还在为每次修改HTML代码都要手动刷新浏览器而烦恼吗？VS Code Live Preview插件正是为你量身定制的解决方案！这个强大的扩展能在你的工作区中启动本地服务器，实时预览网页内容，让你专注于代码创作而非繁琐的刷新操作。无论你是前端新手还是经验丰富的开发者，Live Preview都能显著提升你的开发效率。 ## 为什么你需要Live Preview？ 传统的网页开发流程中，你需要在编
Mermaid Live Editor实战指南：代码驱动图表可视化的技术实现方案
gitblog_00425的博客
06-07 536
在技术文档编写和系统架构设计中，图表可视化是提升沟通效率的关键环节，但传统图表工具存在诸多技术痛点：依赖复杂的GUI操作、版本控制困难、团队协作效率低下、图表与代码分离导致维护成本高昂。Mermaid Live Editor作为一款基于代码驱动理念的实时图表编辑器，通过将图表定义转化为可版本控制的文本代码，为开发者提供了高效的技术文档可视化解决方案。 ## 技术痛点分析：传统图表工具的局限性
【OpenClaw全面解析：从零到精通】第53篇：OpenClaw多模态能力应用实战：Computer Use Agent、Peekaboo v3视觉自动化与语音交互完整指南
xyghehehehe的专栏
05-14 345
视觉感知：Peekaboo v3提供macOS桌面自动化的完整解决方案，40+个CLI命令覆盖屏幕捕获、UI操作、窗口管理全场景；Vision模型支持GPT-4o/Claude Opus/InternVL3三种部署模式，从云端到本地GPU到边缘设备全覆盖。语音交互：mlx-whisper本地语音识别延迟<2秒、零成本；Edge TTS免费语音合成支持多种中文声音；FFmpeg转码解决Telegram语音条格式问题。视频生成。
Claude Code 2026：国产模型接入与cc-switch动态切换实战指南
aocaiti5781的博客
06-15 463
AI编程工具的核心已从‘内置模型’转向‘智能代理架构’——即通过标准化协议（如OpenAI兼容API）解耦前端交互与后端推理。其技术价值在于实现低延迟、可配置、热重载的模型路由，支撑多国产大模型（如DeepSeek-V4-Pro、Kimi-2.7、GLM-4-Flash）的无缝接入与场景化调度。典型应用场景包括VS Code深度协同编码、自然语言触发本地脚本（Skill）、上下文钉选的长会话管理等。cc-switch作为原生配置切换机制，使开发者无需重启即可在不同模型间秒级切换，真正实现‘任务驱动模型’而非
Arch Linux 手动部署 ownCloud：LAMP 栈深度配置与运维实践
最新发布
weixin_33744854的博客
06-19 375
ownCloud 是一款开源私有云存储平台，其核心依赖于 LAMP（Linux、Apache、MySQL/MariaDB、PHP）技术栈。理解 LAMP 原理是实现稳定私有云服务的基础：Linux 提供系统级控制与安全隔离，Apache 负责 HTTP/WebDAV 协议处理与重写规则，MariaDB 保障高并发元数据读写一致性，PHP 则驱动应用逻辑与缓存协同。这种原生栈部署相比 Docker 更利于长期维护与故障溯源，尤其适合 Arch Linux 这类滚动更新、强调透明可控的发行版。本文聚焦于 Arc
关于vscode中的Live Server不起作用的解决方法
qq_57019472的博客
10-15 1万+
解决vscode中的LiveServer不起作用的问题
关于vs code中Live Server插件安装后无法打开的问题
2202_76101487的博客
06-29 6336
live server插件无法打开的问题解决
解决VScode点击open with live server 浏览器没有反应
2301_76742166的博客
03-05 4164
VScode安装了live server插件，预览时点击open with live server游览器没反应，不打开。
在vscode内启动服务，本地访问网站，preview on Web Server，设置插件
weixin_42737733的博客
11-09 1万+
关于html静态页面的地洞和访问，使用view in Browser或者Preview on Web Server。 下载server 步骤 在extensions插件扩展中，搜索server 完成之后重启vscode 在要启动的html页面右键 选择vscode-preview-server:Launch on Browser 自动打开网站并访问页面 配置 在插件...
关于vscode Live Server插件无法正常打开浏览器
热门推荐
nihaio25的博客
09-15 2万+
问题描述：1.你是不是也遇到过在vscode里安装Live Server插件，安装成功了，但点击open with Live Server却无法打开浏览器。 2.点击vscode的open width live sever服务端口看到5500端口号 在浏览器输入http://127.0.0.1:5500/ 看到的是上上级目录。我也是遇到了这种问题。我找了好久才发现这是环境路劲配置有问题。 解决问题： 1.打开此电脑 2.找到点击属性 3.点击高级属性 4.找到系统属性。点击环境变量 5.找到P
SUMTEC轻量博客微服务：文件即数据库的极简架构实践
xiang_fu的博客
06-14 675
博客系统本质上是结构简单、变更低频、强一致性要求的内容管理场景。传统CMS因功能冗余导致运维复杂，静态生成器缺乏运行时灵活性，而SUMTEC提出‘内容即配置、路由即约定、部署即复制’的微服务范式——以纯文本文件为唯一数据源，通过按需解析+内存缓存+HTTP网关实现毫秒级响应。其核心价值在于将Git版本控制、原子文件操作与插件化扩展深度耦合，天然适配树莓派、VPS及边缘部署；尤其适合追求Just Enough Backend的单作者技术博客。本文详解其文件系统即数据库设计、钩子驱动插件机制与Nginx+PM2
Live Server插件打开浏览器时：该网页无法正常运作，127.0.0.1未发送任何数据的问题解决
iCode504的博客
11-27 3448
Live Server插件打开浏览器时：该网页无法正常运作，127.0.0.1未发送任何数据的问题解决
解决VS code中点击Open With Live Server无反应问题
BAB__的博客
05-09 1万+
Open With Live Serevr点击无反应
VS code内置浏览器插件-Preview on Web Server
花开如雨的博客
04-20 8805
VS code内置浏览器需要自己下载安装，下面我们就来看看下载安装使用VS code内置浏览器的图文教程。 软件名称： Visual Studio Code(代码编辑器) v1.51.1 64位 中文免费绿色版 软件大小： 60.7MB 更新时间： 2020-11-13立即下载 1、打开VS code 2、点击如图所示的插件商店 3、点击顶部搜索栏输入“Preview on Web Server” 4、 搜索结果第一个就是 点击install下载 5、回到代码部分 ，鼠标右键单击，
VSCode插件preview on Web Server
记录和分享属于我的“IT”时光。
12-19 5073
VSCode插件preview on Web Server
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值