讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
首页 > 开发工具 > VSCode > 正文

使用Live Server插件在VS Code中启动本地开发服务器

P粉986688829
发布： 2025-12-05 14:27:16
原创
252人浏览过
Live Server 是 VS Code 中轻量级本地开发服务器插件，支持一键启动带热重载的 HTTP 服务，适用于 HTML/CSS/JS 静态项目；安装后可通过右键菜单或状态栏“Go Live”启动，默认端口5500，可配置端口、根目录、浏览器等。

使用live server插件在vs code中启动本地开发服务器

Live Server 是 VS Code 中最常用、最轻量的本地开发服务器插件，它能一键启动一个支持热重载（live reload）的 HTTP 服务，特别适合前端 HTML/CSS/JS 静态项目快速预览和调试。

安装 Live Server 插件

打开 VS Code，点击左侧扩展图标（或按 Ctrl+Shift+X），在搜索框中输入 Live Server，找到由 Ritwick Dey 维护的官方插件（图标为闪电⚡，下载量超千万），点击“Install”安装即可。安装后无需重启编辑器。

启动服务器的两种方式

  • 右键点击任意 HTML 文件 → 选择 “Open with Live Server”
  • 点击 VS Code 右下角状态栏中的 “Go Live” 按钮（首次使用时可能显示为“Live Server”）

启动后，VS Code 会在默认浏览器中自动打开 http://127.0.0.1:5500/your-file.html，同时终端会显示服务日志，端口默认为 5500（可自定义）。

基础配置与常用设置

如需修改默认行为，可通过 VS Code 设置（Ctrl+,）搜索 live server 调整：

Riffo
Riffo

Riffo是一个免费的文件智能命名和管理工具

Riffo 216
查看详情 Riffo
  • “Settings: Port”：更改默认端口号（如设为 8080）
  • “Settings: Root”：指定项目根目录（避免路径错误导致资源 404）
  • “Settings: Custom Browser”：指定默认打开的浏览器（如 “chrome” 或 “edge”）
  • “Settings: Auto Reopen”：勾选后，重启 Live Server 时自动刷新页面

注意事项与常见问题

Live Server 本质是静态文件服务器，不处理 Node.js 后端逻辑或 API 请求。遇到以下情况请留意：

  • 图片/CSS/JS 路径出错？检查是否用了绝对路径（如 /css/style.css），建议改用相对路径或统一设置 Root
  • 修改代码后没自动刷新？确认文件已保存（Live Server 默认监听保存事件），或检查浏览器是否禁用了 JavaScript
  • 想代理 API 请求？Live Server 不支持 proxy，此时建议切换到 Vite、Webpack Dev Server 等更完整的开发工具

基本上就这些 —— 对纯前端静态页面来说，Live Server 快、稳、零配置，是真正开箱即用的开发小帮手。

以上就是使用Live Server插件在VS Code中启动本地开发服务器的详细内容，更多请关注php中文网其它相关文章！

相关标签：
java css javascript html js 前端 node.js node go vite 浏览器 JavaScript css chrome html edge webpack auto JS 事件 http

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：如何搜索、安装和管理你的VS Code插件 下一篇：在VS Code中调试Node.js应用程序的权威指南
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
Go语言开发者如何配置VS Code的GOPATH和模块 现代Go开发（1.11+）默认启用模块，GOPATH作用已弱化；关键在于确保go命令可用、GOROOT正确、GO111MODULE=on，并让VSCode的Go扩展能调用gopls等工具。
2025-12-05 16:13:02
118
在Windows上结合VS Code和WSL进行无缝Linux开发 答案：结合VSCode与WSL2可在Windows上实现接近原生的Linux开发体验。首先启用WSL功能并运行wsl--install安装Ubuntu等发行版，重启后创建用户账户并更新系统包。通过wsl--list--online可查看其他可选发行版。接着在VSCode中安装“Remote-WSL”扩展，使用F1命令“Remote-WSL:NewWindow”打开新窗口，此时终端为Linux环境，支持apt、gcc、python等命令，文件路径指向WSL系统。推荐将项目存放于WSL文件系统（如~
2025-12-05 16:01:02
717
通过“附加到进程”功能调试正在运行的VS Code应用 VSCode自身无法通过“附加到进程”调试，因其主/渲染进程未默认启用调试端口且无源码映射；仅支持调试用户启动的、显式启用调试的Node.js或.NET进程。
2025-12-05 15:43:02
712
VS Code中的“设置同步”功能的高级用法 VSCode的设置同步可通过配置实现精细化控制。1.可通过settingsSync.ignoredExtensions等项忽略特定扩展、设置或键值，避免同步不必要的内容；2.支持多GitHub账号切换，实现工作与个人环境隔离；3.提供手动同步触发与冲突解决机制，确保数据一致性；4.在远程开发中自动同步配置，结合作用域设置优化不同环境体验。合理配置可提升多设备开发效率。
2025-12-05 15:17:02
878
在VS Code中调试Node.js应用程序的权威指南 VSCode调试Node.js需确保环境就绪、正确配置launch.json，支持launch/attach模式、断点类型及sourceMaps，适配Express/TS/Next.js等场景。
2025-12-05 14:40:02
172
使用Live Server插件在VS Code中启动本地开发服务器 LiveServer是VSCode中轻量级本地开发服务器插件，支持一键启动带热重载的HTTP服务，适用于HTML/CSS/JS静态项目；安装后可通过右键菜单或状态栏“GoLive”启动，默认端口5500，可配置端口、根目录、浏览器等。
2025-12-05 14:27:16
252
如何搜索、安装和管理你的VS Code插件 高效使用VSCode插件需三步：精准搜索（用@category、@sort等前缀筛选，核验兼容性与更新时间）、安全安装（优先官方市场，留意依赖与权限）、日常管理（开启自动更新，禁用非必要插件，卸载时手动清理配置）。
2025-12-05 13:48:06
509
使用VS Code和rust-analyzer插件进行Rust编程 VSCode搭配rust-analyzer是最主流、体验最流畅的Rust开发组合，提供精准跳转、实时检查、智能补全、重构及内联文档；需安装Rust工具链和官方插件，开箱即用，支持宏、泛型、生命周期等深度理解，并与调试器无缝协同。
2025-12-05 13:35:50
336
用VS Code进行Go语言开发：GOPATH与Go Modules配置 现代Go开发默认启用GoModules并弃用GOPATH，VSCode通过gopls基于go.mod工作；GOPATH仅用于存放goinstall生成的可执行文件及极老项目源码。
2025-12-05 12:33:14
576
为Rust编程语言优化你的VS Code编辑器 在VSCode中高效编写Rust代码需安装RustAnalyzer和CodeLLDB扩展，确保rustup工具链就绪，配置自动格式化、括号补全和内联提示，并善用跳转、引用查看及cargocheck等功能。
2025-12-05 09:05:12
580
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部