在vscode中安装使用live Server（前端搭建自己的本地服务器环境）

已于 2023-04-28 14:16:02 修改
阅读量4.3k 收藏 7
点赞数
文章标签： vscode ide 编辑器 服务器
于 2023-04-27 10:07:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z1093541823/article/details/130399934
版权
在VSCode扩展中下载并配置liveServer，修改settings.json设定端口号，避免冲突。指定Chrome路径，重启VSCode后使用golive功能。在HTML项目中，通过dist文件夹直接打开预览。

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

一、在扩展中搜索live Server，找到并下载，下载完后点击设置图标，点击扩展设置

 二、点击在settings.json中编辑，在JSON中修改添加下列代码

端口号可配，注意不要与其他服务冲突；

AdvanceCustomBrowserCmdLine填写自己实际chrome的路径；

 三、保存重启vscode,点击右下角的go live 就可以了

 四、在html中可以直接打开，在项目中，找到dist文件打开就可以了

银子先生
关注
VSCode 使用教程：项目使用配置、使用哪些插件、Live Server使用问题及解决方案(你想要的，都在这里)
狮子座的男孩
11-26 4484
插件打开文件夹下的文件，就类似于从服务器上访问该文件，且代码出现改动后，可以自动刷新;// 由于被打开的文件只是一个单独的文件，而非存在于一个文件夹内，因此在右键点击。：当文件信息修改后，只要切换成其它文件，上个文件的修改信息就会自动保存;//且在切换其它文件时，该双击打开的文件会在窗口保存，不会被覆盖;//且在切换其它文件时，该单击打开的文件不会在窗口保存，会被覆盖;)，即：写好代码后，延迟多少毫秒会自动保存;)后，再打开时间线，通过点击时间线中不同的。)后，再打开大纲，发现该文件中的。
VSCODE搭建本地服务器--运行ajax
Free_Ya的博客
04-05 2137
前言: 最近学习jq中，涉及AJAX的知识点，在使用VSCODE运行的时候，总是报错。后来才知道是需要搭配本地服务器才可运行。故写下该文章。 首先我们需要安装 live sever，看下图教程: 在这里输入 live server 下载并安装 接着我们需要打开控制台： 好了，相信看到这里，你一定会根据网上查找的命令进行使用，结果发现还是配置不成功。那么让我我们在输入命令前，做一些准备工作： 1.把vscode设置成管理员身份运行 2.把powershell以管理员身份启动并配合命令进行设置
vs code安装配置live server配置Browser浏览器、改Port端口号、改Host地址
热门推荐
残阳曦月
06-02 1万+
vs code安装配置live server配置Browser浏览器、改Port端口号、改Host地址一、vs code扩展搜“Live Serve”，安装即可二、点击查看扩展，找到Live Server，点击【设置】按钮，选-【扩展设置】三、配置自定义（浏览器、Host、Port）1、配置默认浏览器打开2、配置修改Host地址为localhost（默认127.0.0.1）3、配置固定端口号为8080（默认为5500） 一、vs code扩展搜“Live Serve”，安装即可 二、点击查看扩展，找到Li
【VScode连接远程server代码】
最新发布
linjiasen的博客
04-02 220
选择对应的server，第一次进入会建立VS Code Server，左下角会一直转圈提示初始化中，这里比较慢，需要等待完成。这里可以点击detail看详细安装过程。4、选择remote explorer，选择对应的远程server。file-open folder就可以了。1、打开VScode，点击左下角的远程。ctrl+s保存config。这里是配置IP和用户名。
VSCode Live Server 安装与使用教程
gitblog_00534的博客
08-12 1559
VSCode Live Server 安装与使用教程 项目地址:https://gitcode.com/gh_mirrors/vs/vscode-live-server 1. 项目介绍 VSCode Live Server 是一个由 Ritwick Dey 开发的Visual Studio Code扩展插件，它提供了一个带有实时重载功能的本地开发服务器。该插件允许开发者在编辑静态或动态页面时实时预...
vsCode之Live Server
wch19960518的博客
05-30 1099
我本地一个前端项目需要引入另一个项目的线上地址，但又不想本地搭一套服务，于是就在vsCode中装了这个插件。
VSCode Live Server 插件安装和使用
呆萌很的博客
01-08 3621
VSCode Live Server 插件安装和使用
vscode中加入live server插件并在浏览器中展示
Arinck的博客
04-28 1498
6.还有一种方法打开浏览器，在代码页面的任何位置右击，如图，选择“Open With Live Server”或者使用快捷键“alt+L ait+O”,也可以打开默认浏览器。5. 打开写好的html代码页面后，可以点击右下角的“Go Live”标识，即可自动打开默认浏览器并运行编写代码，写的过程中要及时保存代码可以实现网页代码的实时预览。2.在搜索框写入圈1“live server ”插件，选择圈2安装。3.等待安装完毕 后。4.安装插件完成后，
前端搭建本地开发服务器
04-01
### 前端搭建本地开发服务器 #### 一、引言 在前端开发过程中，搭建一个本地开发服务器是非常重要的步骤之一。它不仅有助于快速预览和调试代码，还能确保跨设备兼容性，尤其是在多设备（如手机和电脑）上查看项目...
前端环境搭建软件，vscode+nvm+git
09-30
本篇将详细介绍如何搭建一个前端环境，主要涵盖三个关键部分：开发编辑器Visual Studio Code（简称vscode）、Node.js运行环境的安装与版本控制工具nvm（Node Version Manager），以及版本控制系统git的安装和基础...
vscode前端开发环境搭建javascript
03-01
### 使用VSCode搭建JavaScript前端开发环境 #### 安装Visual Studio Code 为了设置JavaScript前端开发环境，安装最新版本的 Visual Studio Code 是必要的。可以从官方网站下载并按照操作系统的指示完成安装过程。 ...
【TypeScript环境搭建】：在VSCode中打造并优化你的开发环境
[【TypeScript环境搭建】：在VSCode中打造并优化你的开发环境](https://img-blog.csdnimg.cn/20210902110938933.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAbGF1X2p3,...
VScode下安装Live Server（自动刷新html页面）
追求卓越583的博客
08-30 5526
VScode下安装Live Server（自动刷新html页面）
VS Code -- Live Server
2301_76778596的博客
03-16 3839
Live Server插件用来自动加载热部署前端页面相关的文件（.html/.js/.ts/.css），简单来说就是：快速启动本地服务，自动监听，不需要刷新就能更新内容。有了它之后调试前端页面再也不需要不停地手工去点击浏览器上的刷新按钮。
在vscode中使用Live Server 真机调试
m0_64520392的博客
06-27 3490
Vscode Live Server 安装并使用 移动端真机调试
VSCode调试揭秘：Live Server助力完美测试Cookie与Session，远超“Open in Browser“！
啊猪是的读来过倒的博客
06-09 2488
适用于简单的本地文件访问，但不支持跨域Cookie和Session的处理。通过本地HTTP服务器访问文件，支持跨域Cookie和Session的处理，并提供更多的配置灵活性。对于需要测试跨域功能的开发者来说，它是一个更好的选择。所以，在开发过程中，如果需要处理跨域相关的Cookie和Session，建议使用。然而，如果你只是需要简单地查看本地HTML文件，open in browser 可能就足够了。
vscode怎么使用live server
Amouzy的博客
03-02 4922
步骤： 1.点击左边活动栏最下面的插件按钮 2.在输入框搜索live server插件。（大概输完“live”下面就出现了） 3.安装live server插件 4.此时右下角状态栏会出现“go live” 图解： 像这样子，就可以了： ...
Visual Studio Code 插件 Live Server 安装与配置完全指南
gitblog_07464的博客
09-13 3122
Visual Studio Code 插件 Live Server 安装与配置完全指南 vscode-live-server Launch a development local Server with live reload feature for static & dynamic pages. ...
VSCode创建并运行html页面（使用Live Server插件）
m0_51371779的博客
06-24 2093
打开浏览器，输入网址 http://localhost:【端口号】/【html文件名】.html，我这里是http://localhost:5500/testhtml.html，大家根据自己的端口号和html文件名修改网址。在输入框中输入“xxx.html”，其中xxx是html文件的名字，回车。点击扩展按钮，搜索Live server，点击“安装”按钮。在弹出的窗口中选择刚才新建好的文件夹，点击“选择文件夹”在VSCode中点击“文件”，再点击“打开文件夹”在打开的文件夹中选择“新建文件”按钮。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值