vsCode中live server插件的安装及使用

最新推荐文章于 2024-04-28 23:05:44 发布
Code--Maker 最新推荐文章于 2024-04-28 23:05:44 发布
阅读量3.1w 收藏 73
点赞数 41
分类专栏： live server插件 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/gdxjznfw/article/details/108130708
版权
live server插件 专栏收录该内容
1 篇文章 0 订阅
订阅专栏

live server 插件是用来干嘛的?

本地开发常常需要搭建临时的服务,作用 :
1.模拟服务器的方式打开页面
2.代码改动后,会自动刷新页面

安装 :

在这里插入图片描述
在这里插入图片描述

使用 :

1.使用要求 :
要求项目文件夹 Demo 要单独出现在vscode侧边栏。以下两种都可以
在这里插入图片描述

在这里插入图片描述
文件夹打开错误示范 :在这里插入图片描述

tip : 写项目时大家最好留一个要编辑的项目文件夹在vacode侧边栏就可以,这样清清爽爽写代码,心里也舒畅(头发也掉的少啦)

2.使用 live server 插件打开页面:

如果vscode侧边栏只有项目文件夹Demo，那么在页面中，直接右键，选择open with live server 打开即可。
在这里插入图片描述
如果侧边栏有多个文件夹，按照下面的方式来设置:
在这里插入图片描述
在这里插入图片描述
设置好项目文件夹之后，打开要编辑的html页面，右键 --> open with live server。

以上就是live server 插件的使用说明及步骤,其实是非常简单的,大家根据图示一步一步流下来就ok了

补充 : 有的小伙伴用live server 插件打开不是谷歌浏览器,会有影响,下面是设置live server 插件打开时是谷歌浏览器的方法
在这里插入图片描述
最后 : 如果有理解不对的地方希望大家指出来,在下面评论区多交流沟通噢~~

VsCode扩展插件LiveServer使用和代理设置
RoadToTheExpert的专栏
04-28 7166
前言： 有时候，要用http来运行一个本地网页，调试ajax, restful, websocket等操作。 尽管有很多IDE如 Eclipse, VisualStudio, PhpStorm 可以实现。但这些工具好像太重型，在一台新电脑上安装也是费时。 还有 php, python, nodejs 等都有 cli、 cgi、第三方库 来启动 http 服务。但这也仅仅是开了web服务器。...
VSCODE下载及插件安装保姆级教程来咯
04-20
VSCode 下载及插件安装保姆级教程 VSCode 是微软推出的轻量级代码编辑器，具有简洁、灵活、功能强大等特点，深受广大开发者的欢迎。下面是 VSCode 下载及插件安装的详细教程。 VSCode 下载 首先，需要从官方网站...
VSCode用法及插件详细教程
11-06
VSCode详细教程包含：安装、中文插件、格式化插件Prettier、Live Server插件、OpenInBrowser插件、Auto Rename插件、字体配置、缩放配置、主题风格配置、缩略图、光标配置、常用的Emmet语法及举例、常用快捷键用法等详细过程演示。
vscode中加入live server插件并在浏览器中展示
最新发布
Arinck的博客
04-28 368
6.还有一种方法打开浏览器，在代码页面的任何位置右击，如图，选择“Open With Live Server”或者使用快捷键“alt+L ait+O”,也可以打开默认浏览器。5. 打开写好的html代码页面后，可以点击右下角的“Go Live”标识，即可自动打开默认浏览器并运行编写代码，写的过程中要及时保存代码可以实现网页代码的实时预览。2.在搜索框写入圈1“live server ”插件，选择圈2安装。3.等待安装完毕 后。4.安装插件完成后，
nginx为项目解析域名！
weixin_42207486的博客
10-17 600
为端口配置域名： server { listen 80; server_name www.*.cn; location / { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $p...
vscode插件系列-live server
前端啤酒屋
11-26 1498
Live Server 直译为实时服务器。这个插件是一个具有实时重新加载功能的小型开发服务器。用来破解html/js/css文件，而不适用于部署最终的站点。 优势 vscode拓展方便，一键安装架设本地服务器环境，并且可解决自动刷新的问题。 在需要打开的启动页右键 open with live server 默认接口为5500 就可以方便的启动项目 ...
VS Code插件live server的安装和使用
weixin_43250628的博客
06-17 428
VS Code插件live server的安装和使用
VS Code -- Live Server
2301_76778596的博客
03-16 3145
Live Server插件用来自动加载热部署前端页面相关的文件（.html/.js/.ts/.css），简单来说就是：快速启动本地服务，自动监听，不需要刷新就能更新内容。有了它之后调试前端页面再也不需要不停地手工去点击浏览器上的刷新按钮。
在VSCode中使用Live Server真机调试
lklalmq的博客
01-17 970
6、把 127.0.0.1 换成 IPv4的地址 ，列：http://192.168.0.120:5500/index.html，在手机上输入就可以访问了。4、想要在手机上访问 就需要输入你的IP地址加上后面的5500 查看ip地址 Windows+R 输入cmd。2、安装完成之后 鼠标右键单击 html文件 > 点击 Open with Live Server。注意（电脑和手机必须处于同一个网络下 才可以使用 否则不生效！1、在vscode 中搜索 Live Server并安装。
vscode下关于Live Server的使用
热门推荐
zhouwei_doris的博客
06-07 17万+
一、在vscode扩展中搜索live server，并安装二、打开命令面板，输入settings，点击首选项三、搜索live sever配置项，将左侧需要修改的配置项复制到右侧用户设置并修改四、选择需要浏览的文件，右键开启服务，就可以在浏览器中浏览网页啦...
VsCode LiveServer使用_LiveServer启动调试
天马3798
12-25 1万+
一、Vs Code LiveServer 启动具有静态和动态页面的实时重新加载功能的开发本地服务器。 这是一个具有实时重新加载功能的小型开发服务器。用它来破解你的 HTML/JavaScript/CSS 文件，而不是用于部署最终站点。 使用这个有以下几个个原因： 1.file://由于安全限制，AJAX 请求不适用于该协议，即，如果您的站点通过 JavaScript 获取内容，则您需要一个服务器。 2.在更改文件后自动重新加载页面可以加速开发。 3.本机开发的静态网页，可以在手机上浏览效果测试。.
Visual Studio Code 常见的配置、常用好用插件以及【vsCode 开发相应项目推荐安装的插件】
qw_6918966011的博客
08-06 394
支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari。，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。它不仅能够给文件夹、文件添加上舒适的图标，而且可以自动检测项目，根据项目不同功能配上不同图标。用IDE编写代码的时候可以给出智能提示，写的越多提示的越准确。像颜色提示、主题那种，还有语法检查、语法智能提示等。Vetur插件介绍：功能包括-
vscode安装使用的详细教程
10-14
- 使用"Live Server"插件，右键文件选择在服务器上打开，自动刷新页面。 - 或者安装"http server"插件，创建服务器运行当前文件。 **总结** VS Code凭借其丰富的功能、良好的性能和高度的可定制性，成为许多...
Live Server Web Extension-crx插件
04-02
您必须为vscode安装Live Server扩展以才能使用此添加项。 按照此链接设置：https：//github.com/ritwickdey/live-server-web-extension#Setup 演示：...
Web-前端教程01 安装 Visual Studio Code 和 Live Server 实时重载插件.zip
05-24
Web-前端教程01 安装 Visual Studio Code 和 Live Server 实时重载插件.zip
live Server安装使用
weixin_47768980的博客
07-07 1145
live-server可以帮助我们在网页开发中开启一个实时的服务以方便我们可以实时查看开发的网页，更主要的是开发移动端的时候在同一局域网下我们可以通过本地在手机上访问网页效果。我们就可以通过生成的地址去访问，当然也可以通过本地id加55656端口号进行访问，如果想用其他端口号可以在运行live-server的时候用--port的方式指定端口号。安装完之后就会有live-server的命令然后我们在需要启动服务的根目录输入cmd回车。然后输入live-server命令回车。
VScode下安装Live Server（自动刷新html页面）
追求卓越583的博客
08-30 5196
VScode下安装Live Server（自动刷新html页面）
VS Code——Live Server的简介、安装与使用
无限迭代中......
01-07 7万+
基本概念 Live Server：一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。 优点 1：一键安装，实现自动刷新，架设本地服务器环境。 2：比起 gulp 构建 实现自动刷新，架设本地服务器环境，需要安装自动刷新插件...
vscode安装live-server插件
06-28
### 回答1： 1. 打开VSCode编辑器。 2. 点击左侧的“扩展”图标。 3. 在搜索框中输入“live-server”。 4. 找到“Live Server”插件并点击“安装”按钮。 5. 安装完成后，点击“启用”按钮。 6. 在编辑器中打开HTML文件，右键单击文件并选择“在Live Server中打开”。 7. 现在，您可以在浏览器中查看您的网页，并且当您进行更改时，它将自动重新加载。 ### 回答2： VSCode是一款非常流行的代码编辑器。它支持非常多的插件，允许你自定义编辑器界面及编程环境来满足自己的需求。Live-Server是一款用于前端开发的插件，它提供了一种方便的方式来自动化你的前端开发流程。 以下是在VSCode上安装Live-Server插件的步骤： 1. 在VSCode左侧的“扩展”栏中搜索“live-server”，并点击安装按钮。 2. 安装完成后，打开你的HTML文件。在编辑器中右键单击文件并选择“Open with Live Server”，或者使用快捷键“Ctrl+Shift+L”打开Live Server。 3. 当你打开Live Server时，它会自动在默认浏览器中打开你的HTML文件。从此以后，你所作的任何更改都将自动重新加载，免去了手动刷新页面的麻烦。 总之，VSCode与Live Server插件的结合让前端开发更加方便、高效。如果你是一位前端开发人员，那么你应该尝试着使用这款插件，它会让你的工作效率大大提高。 ### 回答3： 在使用VS Code进行前端开发时，经常需要在本地搭建一个简单的Web服务器来预览网页效果，而Live Server插件不仅可以快速搭建本地服务器，还可以实现热重载等功能，极大地提高了我们的开发效率。 下面是VS Code安装Live Server插件的步骤： 第一步：打开VS Code，点击左侧菜单栏的扩展(Extensions)图标，或使用快捷键(Ctrl+Shift+X)打开扩展管理器。 第二步：在扩展管理器中搜索Live Server插件，并点击安装。 第三步：安装完毕后，重新启动VS Code，在左侧文件栏中打开要预览的HTML文件，右键点击文件名，选择“在Live Server中打开(Open with Live Server)”，或者直接使用快捷键(Ctrl+Shift+L)打开本地服务器，即可在浏览器中预览网页。 此时，如果对HTML或CSS文件做出修改，网页会自动刷新，实现热重载的效果。另外，Live Server还支持在多个浏览器标签中同时预览同一个页面、在线调试、自定义端口等功能，可以在插件的设置中进行配置。 总之， Live Server插件是一款非常实用的前端开发工具，能够帮助开发者快速搭建本地服务器，提高开发效率，是值得推荐的插件之一。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
写文章

热门文章

  • vsCode中live server插件的安装及使用 31899
  • js中实现rem适配 2857
  • elementUI 修改input-placeholder 样式 2716
  • Vue项目中使用upload组件上传图片,视频到OSS阿里云服务器 1814
  • Vue中内置指令v-if和v-show的区别 1465

分类专栏

  • ElementUI 2篇
  • Vue 2篇
  • live server插件 1篇
  • js 4篇
  • ECharts可视化图表插件 1篇

最新评论

  • vsCode中live server插件的安装及使用

    Code--Maker: 新建一个窗口就好了，这个没什么实质性的东西，只是打开静态页面方便我们调试静态页面改代码的

  • vsCode中live server插件的安装及使用

    我如果能够让时光倒流: 怎么用 liveServer 打开的其他文件夹里的文件

  • vsCode中live server插件的安装及使用

    呀！仙女: 如果设置live serve 打开时是新建一个窗口而不是一个标签页

  • elementUI 修改input-placeholder 样式

    Jack おう: nice\

  • Vue项目中使用upload组件上传图片,视频到OSS阿里云服务器

    盼盼编程: 佩服，佩服，一篇绝世好文！欢迎回访，一起学习！

您愿意向朋友推荐“博客详情页”吗？

  • 强烈不推荐
  • 不推荐
  • 一般般
  • 推荐
  • 强烈推荐
提交

最新文章

  • elementUI 修改input-placeholder 样式
  • elememtUI--Select下拉框及Cascader级联选择器获取value值、label值
  • Vue项目中使用upload组件上传图片,视频到OSS阿里云服务器
2021年3篇
2020年7篇

目录

目录

评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值

聚圣源内衣公司起名校园动漫寒假趣事产品起名免费红楼一梦混仙粉蝶如知合断魂生肖猪的孩子起名宜用字我的佛系田园扫条形码出整本书答案漫步云深处姓方起名大全女孩新生儿起名大全男孩篇左拉东方网址党员个人检视剖析材料酒店起名字女孩宋词起名公司起名字咨询公司科技公司起名有哪些合作社名称起生辰八字起名软件华字起公司名字家纺 取名起名大全laikan板面店起名1996年日历邓姓的宝宝起名八字免费起名怎么给银渐层起名字淀粉肠小王子日销售额涨超10倍罗斯否认插足凯特王妃婚姻让美丽中国“从细节出发”清明节放假3天调休1天男孩疑遭霸凌 家长讨说法被踢出群国产伟哥去年销售近13亿网友建议重庆地铁不准乘客携带菜筐雅江山火三名扑火人员牺牲系谣言代拍被何赛飞拿着魔杖追着打月嫂回应掌掴婴儿是在赶虫子山西高速一大巴发生事故 已致13死高中生被打伤下体休学 邯郸通报李梦为奥运任务婉拒WNBA邀请19岁小伙救下5人后溺亡 多方发声王树国3次鞠躬告别西交大师生单亲妈妈陷入热恋 14岁儿子报警315晚会后胖东来又人满为患了倪萍分享减重40斤方法王楚钦登顶三项第一今日春分两大学生合买彩票中奖一人不认账张家界的山上“长”满了韩国人？周杰伦一审败诉网易房客欠租失踪 房东直发愁男子持台球杆殴打2名女店员被抓男子被猫抓伤后确诊“猫抓病”“重生之我在北大当嫡校长”槽头肉企业被曝光前生意红火男孩8年未见母亲被告知被遗忘恒大被罚41.75亿到底怎么缴网友洛杉矶偶遇贾玲杨倩无缘巴黎奥运张立群任西安交通大学校长黑马情侣提车了西双版纳热带植物园回应蜉蝣大爆发妈妈回应孩子在校撞护栏坠楼考生莫言也上北大硕士复试名单了韩国首次吊销离岗医生执照奥巴马现身唐宁街 黑色着装引猜测沈阳一轿车冲入人行道致3死2伤阿根廷将发行1万与2万面值的纸币外国人感慨凌晨的中国很安全男子被流浪猫绊倒 投喂者赔24万手机成瘾是影响睡眠质量重要因素春分“立蛋”成功率更高？胖东来员工每周单休无小长假“开封王婆”爆火：促成四五十对专家建议不必谈骨泥色变浙江一高校内汽车冲撞行人 多人受伤许家印被限制高消费

聚圣源 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化