vscode怎么使用live server

已于 2022-03-04 18:01:20 修改
阅读量4.9k 收藏
点赞数 2
分类专栏： 前端开发工具 文章标签： liveserver 插件安装 IDE集成 实时预览 golive
于 2022-03-02 13:51:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Amouzy/article/details/123228407
版权

步骤：

1.点击左边活动栏最下面的插件按钮

2.在输入框搜索live server插件。（大概输完“live”下面就出现了）

3.安装live server插件

4.此时右下角状态栏会出现“go live”

图解：

在这里插入图片描述

像这样子，就可以了：

在这里插入图片描述

VSCode 使用教程：项目使用配置、使用哪些插件、Live Server使用问题及解决方案(你想要的，都在这里)
狮子座的男孩
11-26 3953
插件打开文件夹下的文件，就类似于从服务器上访问该文件，且代码出现改动后，可以自动刷新;// 由于被打开的文件只是一个单独的文件，而非存在于一个文件夹内，因此在右键点击。：当文件信息修改后，只要切换成其它文件，上个文件的修改信息就会自动保存;//且在切换其它文件时，该双击打开的文件会在窗口保存，不会被覆盖;//且在切换其它文件时，该单击打开的文件不会在窗口保存，会被覆盖;)，即：写好代码后，延迟多少毫秒会自动保存;)后，再打开时间线，通过点击时间线中不同的。)后，再打开大纲，发现该文件中的。
【vscode】 使用 【Live Server】插件 展示静态网站，自动刷新
jhgj56的博客
11-22 1888
vscode Live Server插件
VSCode Live Server 插件使用教程
gitblog_00626的博客
08-12 726
VSCode Live Server 插件使用教程 项目地址:https://gitcode.com/gh_mirrors/vs/vscode-live-server 1. 项目的目录结构及介绍 VSCode Live Server 插件的 GitHub 仓库（https://github.com/ritwickdey/vscode-live-server）包含以下主要目录和文件： .githu...
VSCode插件Live Server
最新发布
记录和分享属于我的“IT”时光。
02-02 717
VSCode插件Live Server能够实现当我们在VSCode编辑器里修改 HTML、CSS 或者 JavaScript 文件时，它都能自动实时地刷新浏览器页面，让我们实时看到代码变化的效果。再也不用手动刷新浏览器了，节省了大量的开发过程耗时！
vscode中加入live server插件并在浏览器中展示
Arinck的博客
04-28 1447
6.还有一种方法打开浏览器，在代码页面的任何位置右击，如图，选择“Open With Live Server”或者使用快捷键“alt+L ait+O”,也可以打开默认浏览器。5. 打开写好的html代码页面后，可以点击右下角的“Go Live”标识，即可自动打开默认浏览器并运行编写代码，写的过程中要及时保存代码可以实现网页代码的实时预览。2.在搜索框写入圈1“live server ”插件，选择圈2安装。3.等待安装完毕 后。4.安装插件完成后，
Vscode使用Live Server
wuqihawubito的博客
07-15 743
先安装live Server： 然后使用 CTRL+SHIFT+P ,搜索live server： 点击 Open with server就可以打开这个服务器了。 如果要用这个服务器打开具体的html文件：
VSCode Live Server 插件安装和使用
呆萌很的博客
01-08 2700
VSCode Live Server 插件安装和使用
vscode 使用live server出现Open a folder or workspace... (File -> Open Folder)这个错误
01-28
在使用 VSCode 的 Live Server 插件时，如果遇到 "Open a folder or workspace..." 的提示，这通常是因为 Live Server 需要在文件夹或工作区内运行而不是针对单个文件。为了使 Live Server 正常工作，需遵循以下方法...
vscode使用 live server Windows.location 跳不了页面
04-06
您可能需要检查页面路径是否正确。如果路径正确，您可以尝试在代码中使用绝对路径来解决该问题。例如，使用`/`作为根目录，而...另外，您可以尝试使用其他浏览器来查看是否存在与VS Code Live Server集成相关的问题。
VSCode Live Server 安装与使用教程
gitblog_00534的博客
08-12 1503
VSCode Live Server 安装与使用教程 项目地址:https://gitcode.com/gh_mirrors/vs/vscode-live-server 1. 项目介绍 VSCode Live Server 是一个由 Ritwick Dey 开发的Visual Studio Code扩展插件，它提供了一个带有实时重载功能的本地开发服务器。该插件允许开发者在编辑静态或动态页面时实时预...
VS Code -- Live Server
weixin_43588715的博客
03-22 6685
Live Server插件用来自动加载热部署前端页面相关的文件（.html/.js/.ts/.css），简单来说就是：快速启动本地服务，自动监听，不需要刷新就能更新内容。有了它之后调试前端页面再也不需要不停地手工去点击浏览器上的刷新按钮。
vscode下关于Live Server的使用
热门推荐
zhouwei_doris的博客
06-07 17万+
一、在vscode扩展中搜索live server，并安装二、打开命令面板，输入settings，点击首选项三、搜索live sever配置项，将左侧需要修改的配置项复制到右侧用户设置并修改四、选择需要浏览的文件，右键开启服务，就可以在浏览器中浏览网页啦...
VSCode创建并运行html页面（使用Live Server插件）
m0_51371779的博客
06-24 1927
打开浏览器，输入网址 http://localhost:【端口号】/【html文件名】.html，我这里是http://localhost:5500/testhtml.html，大家根据自己的端口号和html文件名修改网址。在输入框中输入“xxx.html”，其中xxx是html文件的名字，回车。点击扩展按钮，搜索Live server，点击“安装”按钮。在弹出的窗口中选择刚才新建好的文件夹，点击“选择文件夹”在VSCode中点击“文件”，再点击“打开文件夹”在打开的文件夹中选择“新建文件”按钮。
在vscode中使用Live Server 真机调试
m0_64520392的博客
06-27 3469
Vscode Live Server 安装并使用 移动端真机调试
在vscode中安装使用live Server（前端搭建自己的本地服务器环境）
z1093541823的博客
04-27 4288
在vscode中安装使用live Server（前端搭建自己的本地服务器） 在扩展中搜索live Server，找到并下载，下载完后点击设置图标，点击扩展设置
vsCode之Live Server
wch19960518的博客
05-30 1053
我本地一个前端项目需要引入另一个项目的线上地址，但又不想本地搭一套服务，于是就在vsCode中装了这个插件。
VSCode调试揭秘：Live Server助力完美测试Cookie与Session，远超“Open in Browser“！
啊猪是的读来过倒的博客
06-09 2444
适用于简单的本地文件访问，但不支持跨域Cookie和Session的处理。通过本地HTTP服务器访问文件，支持跨域Cookie和Session的处理，并提供更多的配置灵活性。对于需要测试跨域功能的开发者来说，它是一个更好的选择。所以，在开发过程中，如果需要处理跨域相关的Cookie和Session，建议使用。然而，如果你只是需要简单地查看本地HTML文件，open in browser 可能就足够了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值