关于vscode Live Server插件无法正常打开浏览器

已于 2025-02-04 21:56:31 修改
阅读量2.1w 收藏 127
点赞数 97
分类专栏： 记录问题 文章标签： vscode
于 2021-09-15 14:12:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nihaio25/article/details/120304202
版权
在VSCode中安装LiveServer插件后，遇到打开浏览器失败的问题，实际显示为上上级目录。解决方法是检查环境变量Path配置。通过依次进入电脑属性->高级系统设置->环境变量，在Path中添加指定路径，并确保顺序正确。添加完成后重启VSCode，问题即可解决。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题描述：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.找到Path点击编辑

6.加上以下路劲 安装顺序直接copy下面的到Path里

C\Program Files\Common Files\IntelWirelessCommon

%SystemRoot%\system32

%SystemRoot%

%SystemRoot%\System32\Wbem

%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\

%SYSTEMROOT%\System32\OpenSSH\

C\Program Files (x86)]Intel\Intel® Processor Graphics

7.最后关闭vcode重启vcode,重新打开就看到成功了！！！！

VSCode 使用教程：项目使用配置、使用哪些插件、Live Server使用问题及解决方案(你想要的，都在这里)
狮子座的男孩
11-26 4702
插件打开文件夹下的文件，就类似于从服务器上访问该文件，且代码出现改动后，可以自动刷新;// 由于被打开的文件只是一个单独的文件，而非存在于一个文件夹内，因此在右键点击。：当文件信息修改后，只要切换成其它文件，上个文件的修改信息就会自动保存;//且在切换其它文件时，该双击打开的文件会在窗口保存，不会被覆盖;//且在切换其它文件时，该单击打开的文件不会在窗口保存，会被覆盖;)，即：写好代码后，延迟多少毫秒会自动保存;)后，再打开时间线，通过点击时间线中不同的。)后，再打开大纲，发现该文件中的。
VScode编写html利用live Server扩展在浏览器无法打开 解决方法如下
haimingjavazhilv的博客
03-23 2799
VScode编写html利用live Server扩展在浏览器无法打开 1.
关于VScode编写html文件时，open with live sever无响应情况
cyycover的博客
10-31 559
此时只需要检查live sever的扩展就行了，我在检查的时候发现指定的浏览器哪里显示的是null，在扩展设置中可以发现此处是null，将其选择为chrome或者edge就行了,我设置的chrome。或者想要运行出来，除了live sever，还可以选择在代码没有bug的时候启动窗口调试。最近新买了一个便携扩展屏，结果敲vue的时候，live sever突然宕机了。检查插件是好的，但是就是无法用live sever将我的代码在浏览器中显示。然后任选一种方式运行代码就ok了。
VSCode Live Server插件失效
qq_41008567的博客
05-18 1万+
VSCode Live Server插件失效 换用Preview on Web Server插件
vs code 编辑cocos 脚本打不开浏览器
最新发布
juying100的博客
02-27 669
可以先参考下上面这篇文章的三个方法，看样子有很多人可以通过这三个方法解决，如果还是打不开，下面是我解决的方法。荒唐的是，我运行成功之后改回 / 也能运行，可能是成功运行一次之后，vs code把路径存下来了吧。launch.jason 文件增加 runtimeExecutable。浏览器路径：在快捷方式右键---属性---目标：复制路径。把路径中的 / 改成 \\，保存后运行就成功了。
【VScode编写html利用live Server扩展在浏览器无法打开 解决方法如下】
m0_65450343的博客
05-01 2041
关于vscode Live Server插件无法正常打开浏览器
【vscode】 使用 【Live Server】插件 展示静态网站，自动刷新
jhgj56的博客
11-22 2040
vscode Live Server插件
Live Server插件打开浏览器时：该网页无法正常运作，127.0.0.1未发送任何数据的问题解决
iCode504的博客
11-27 2739
Live Server插件打开浏览器时：该网页无法正常运作，127.0.0.1未发送任何数据的问题解决
关于VS Code中安装live server后无法正常打开浏览器，并出现Server is Started at port : 5500问题解决方案！
qq_44922199的博客
04-14 1万+
关于VS Code中安装live server后无法正常打开浏览器，并出现Server is Started at port : 5500问题解决方案！
Vscode中liver server插件无法打开浏览器
Smart_11的博客
02-13 2666
Vscode中liver server插件无法打开浏览器
关于vs code中Live Server插件安装后无法打开的问题
2202_76101487的博客
06-29 4685
live server插件无法打开的问题解决
VScode当中下载liveServer后无法正常打开浏览器进行查看
qq_71552894的博客
04-02 2409
随后点击确认，重启VScode，即可正常使用liveServer插件打开浏览器查看。一、直接使用“http://127.0.0.1:5500/”进行访问。1、对liveServer插件的下载进行确认；2、尝试重新下载liveServer插件；3、对电脑Path环境变量进行修改。（5）点击Path变量，进行编辑。（3）点击下方“高级系统设置”（4）点击下方“环境变量”（2）点击下方“属性”二、通过修改环境变量。（1）打开“此电脑”
关于vscode 中Live Server插件无法弹出Chrome浏览器问题
a1248491526的博客
11-11 2798
在进行html文件打开Open with Live Server时出现 错误“找不到Chrome浏览器...”解决办法：
vscode如何设置默认打开的浏览器为Chrome
10-14
总结来说，通过安装“Open in Browser”插件并设置默认浏览器为Chrome，以及利用“Live Server”插件进行页面热更新，你可以提升在VSCode中的Web开发效率。记住，持续关注和更新你的插件库，保持VSCode的优化配置，...
vscode Live Server失效【已解决】
qq_52035691的博客
02-10 1162
刚刚下载Live Server，按Alt+B打开（习惯了用默认浏览器打开），结果没用事实更新，百度一下好像都说改端口号冲突什么的，觉得好麻烦，结果右键点击了一下发现居然是另外的打开方式。解决方法： 按Alt+L Alt+O即可（如图）
解决VScode点击open with live server 浏览器没有反应
2301_76742166的博客
03-05 3384
VScode安装了live server插件，预览时点击open with live server游览器没反应，不打开。
VScode打不开浏览器方法总结
热门推荐
本堃不方的博客
09-17 3万+
最近配置vscode的一些东西，突然有一天不知道怎么了，用vscode运行文件的时候打开浏览器没反应，网上也有很多，总结一下。 1、open in browser更换版本 方法：拓展里搜索open in browser(没安装的自己安装)，open in browser有个设置的小图标—>安装另一个版本—>重启vscode。 PS：作者把所有版本都试了一遍，依旧不行。 或者 2、将谷歌浏览器添加到系统环境变量中...
liveServer无法打开浏览器
qq_54030999的博客
02-15 3200
1.没有选择默认浏览器 如何修改默认浏览器：改变Visual Studio Code中Live Server插件的默认打开浏览器 chrome_zayyo的博客-CSDN博客_live server设置默认浏览器 2.命名方式不对，是打开的HTML文件的绝对路径名称当中含有中文，将中文去除，就可以用 command+L+O的命令了 （学习自用笔记） ...
vscode liveserver插件
06-02
### 回答1： VSCode Live Server插件是一款非常实用的插件，它可以帮助开发者在本地快速启动一个服务器，实时预览网页。使用该插件可以省去手动刷新浏览器的麻烦，提高开发效率。此外，该插件还支持自动保存文件并刷新页面，方便开发者快速预览修改后的效果。总之，VSCode Live Server插件是一款非常实用的工具，值得开发者使用。 ### 回答2： VSCode Live Server 插件是一款功能强大的开发工具，可以使前端开发人员更快、更方便地编写和调试网站代码。这个插件基于 Node.js 构建，具有轻量级、易用、高效等特点。 它可以自动监视您编辑的 HTML、CSS 和 JavaScript 文件，并在保存文件时动态地重新加载页面，这意味着您可以立即查看您所作的更改，并在浏览器中进行实时预览。 此外，这个插件还带有很多其他有用的功能，例如： 1. 支持简单的 HTTP 服务器功能，可以轻松地将您的基于 HTML 的网站部署到本地或公共服务器上。 2. 它可以自动打开浏览器并加载您的网站，从而使预览过程更加流畅和轻松。 3. 它还集成了与 VSCode 的调试器，允许您在 VSCode 编辑器中直接调试 JavaScript 代码。 4. 还包括基础的页面分析功能，可以帮助您调试代码，识别和解决任何问题。 总之，VSCode Live Server 是一个非常有用的插件，可以极大地简化和加速前端网站开发的过程。它是对开发人员的巨大帮助，可以使他们专注于代码而不用担心复杂的部署和调试问题。 ### 回答3： VS Code的Live Server插件是一个非常方便的工具，使得开发者能够实时更新网页并查看页面所做更改的效果。这个插件具有许多功能，它能够使得开发者更加高效地工作。 首先，Live Server插件可以在本地搭建一个服务器，这样开发者就可以在本地进行开发，而无需上传代码到服务器上。这大大提高了开发效率，同时也节省了开发者的时间和资源成本。 其次，该插件带有自动刷新功能。这就意味着，一旦你对代码做出更改并保存，页面就会自动刷新，你可以立即看到效果。这样的自动刷新功能可以大大减少开发人员的时间和工作量，并使他们更容易调试代码。 另外，Live Server还提供了实时模拟网络连接的功能。开发人员可以模拟各种网络条件，例如缓慢的互联网连接或高峰期的网络延迟等，以测试他们的网站在此类情况下的表现。 此外，Live Server还允许开发人员在IE浏览器中进行测试和调试。这特别适用于那些必须支持旧版本的网站开发人员。在Live Server插件中，只需单击鼠标几下，就可以在IE中开始自动测试。 综上所述，Live Server插件是开发人员的理想工具，它可以使开发过程更加高效和简单。它的许多便利功能可以帮助开发人员更快速地开发他们的网站，并集成其他工具以帮助他们测试和调试代码。
评论 58
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值