Live Server：在VS Code中实现网页开发的实时刷新

雨晨同学_2914

发布时间：2025-12-03 20:27:42

795人浏览过

来源于php中文网

原创

Live Server 是 VS Code 中用于自动刷新浏览器的轻量级开发插件。安装后点击“Go Live”或使用快捷键即可启动本地服务器（默认端口5500），保存HTML/CSS/JS文件时自动刷新，支持多标签页共享服务，但不支持后端逻辑与生产部署。

live server 是 vs code 中最常用的网页开发插件之一，它能让你在保存 html、css 或 javascript 文件时，自动刷新浏览器页面，省去手动刷新的麻烦，大幅提升前端开发效率。

安装与启用 Live Server

打开 VS Code 的扩展市场（Ctrl+Shift+X），搜索 Live Server，选择由 Ritwick Dey 发布的官方版本，点击“安装”。安装完成后，重启 VS Code（通常无需重启，但建议确认状态栏右下角是否出现“Go Live”按钮）。

若未显示“Go Live”，可右键任意 HTML 文件，在上下文菜单中选择 Open with Live Server
也可使用快捷键 Alt+L Alt+O（Windows/Linux）或 Cmd+L Cmd+O（macOS）快速启动

启动与基础使用

点击右下角的 Go Live 按钮，VS Code 会自动启动本地服务器（默认端口 5500），并在默认浏览器中打开当前 HTML 文件。此后每次保存文件，浏览器都会自动刷新。

地址栏显示类似 http://127.0.0.1:5500/index.html，说明服务已运行
关闭服务器：点击右下角按钮变为 Stop Live Server，或再次按快捷键
支持多标签页共用同一服务，适合同时调试多个相关页面

常用配置与小技巧

Live Server 默认行为已足够日常使用，但可通过设置微调体验：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

在 VS Code 设置中搜索 live server，可修改端口号、默认浏览器、是否自动打开浏览器等
想让 CSS 修改也触发刷新？确保 HTML 中的样式是内联或通过 <link> 引入的外部文件（非内联 style 标签）
支持热重载部分场景（如 JS 错误不会中断服务），但不等同于 Webpack 的 HMR，复杂项目仍需专业构建工具

注意事项与常见问题

Live Server 是轻量级开发服务器，适合静态页面和原型验证，不是生产环境服务器。

不支持 Node.js 后端逻辑，无法处理 fetch('/api') 等请求（除非后端另起服务并配置跨域）
路径问题常见：图片或脚本 404，多数因相对路径写错，建议用开发者工具 Network 面板检查请求地址
如果刷新失效，先检查是否误点了“暂停自动刷新”（浏览器地址栏右侧有 Live Server 图标可切换）

基本上就这些。对初学者和中小型前端项目来说，Live Server 简单、可靠、开箱即用，是 VS Code 开发工作流里一个不复杂但容易忽略的提效关键点。

怎么在VS Code中高效调试基于Docker容器运行的Python代码？

Win10怎么在VS Code中一键直连本地WSL环境进行代码调试

Win10注册表修改实现右键直接以管理员身份打开VS Code

Playwright MCP以无障碍快照驱动网页自动化

VS Code怎么安装护眼主题

相关标签:

vs code css linux javascript java html js 前端 node.js node

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：VS Code Insiders版：体验VS Code的最新功能下一篇：VS Code的Zen模式：为你打造无干扰的编码环境

作者最新文章

Perplexity中如何设置每日搜索消耗提醒_在账户设置中配置资源配额通知

2026-05-04 16:28

Perplexity API如何设置IP白名单访问_在开发者安全选项中绑定固定IP

2026-05-04 22:06

Perplexity如何解决API调用中的跨域CORS安全问题_在后端服务器设置中配置合法域名白名单

2026-05-04 23:30

如何在Perplexity中配置自定义的系统提示词_在高级设置的System Prompt框输入

2026-05-05 08:56

如何在Perplexity中修改个人资料的隐私可见度_在Profile设置中调整Public开关

2026-05-05 21:42

Perplexity中如何设置特定的搜索时段限制_在Focus选项中调整时间范围过滤器

2026-05-06 18:03

为什么Perplexity无法抓取单页应用SPA的内容_开启高级抓取模式以支持JavaScript渲染

2026-05-06 21:10

Perplexity如何开启无痕搜索模式_通过Incognito开关实现历史记录不留存

2026-05-06 21:47

Perplexity API如何配置重试逻辑以应对网络波动_在SDK调用中设置Timeout与Retry参数

2026-05-06 21:48

Perplexity Pro版支持SSO单点登录吗_在企业版身份验证设置中集成Okta或Azure AD

2026-05-08 19:55

热门AI工具

切问学术 Hot

切问学术是一款AI论文写作工具，复旦大学NLP团队推出的AI学术智能体。

Agent智能体

火山引擎 Hot

火山引擎是一款面向企业的云计算与AI服务平台。

AI大模型 AI编程开发

蛙蛙写作 Hot

一款AI论文写作工具，主要用于超级AI智能写作助手，适合需要提升相关任务效率的用户。

AI文本写作中文写作

二狗PPT Hot

一款AI演示文稿工具，主要用于专为中式职场打造的AI PPT生成工具，适合需要提升相关任务效率的用户。

文档处理 PPT 助手

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

AI编程开发 AI聊天问答

超级简历WonderCV Hot

一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。

AI办公学习工作效率

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

AI编程开发 AI大模型

讯飞绘文 Hot

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

AI应用软件 PC软件

WorkBuddy

一款AI办公效率工具，主要用于腾讯云推出的AI原生桌面智能体工作台，适合需要提升相关任务效率的用户。

AI办公学习 Agent智能体

相关专题

js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

4356

2023.06.20

js获取当前时间

JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

1335

2023.07.28

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

1738

2023.08.03

js是什么意思

JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

9923

2023.08.17

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

960

2023.09.01

js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

2704

2023.09.04

Js中concat和push的区别

Js中concat和push的区别：1、concat用于将两个或多个数组合并成一个新数组，并返回这个新数组，而push用于向数组的末尾添加一个或多个元素，并返回修改后的数组的新长度；2、concat不会修改原始数组，是创建新的数组，而push会修改原数组，将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容，供大家免费下载体验。

1549

2023.09.14