Live Server 是 VSCode 中用于前端开发的轻量级本地服务器插件，解决 file:// 协议限制问题，支持自动刷新和 HTTP 环境模拟；安装后右键 HTML 文件选择“Open with Live Server”即可启动，默认端口 5500，可配置端口、根目录及禁用自动打开浏览器。
VSCode 的 Live Server 插件，是前端开发中提升效率的实用工具——它能一键启动本地开发服务器，并自动刷新浏览器，省去手动刷新和配置 Web 服务器的麻烦。
为什么需要 Live Server？
纯 HTML/CSS/JavaScript 项目在双击打开时走的是 file:// 协议，很多功能（如 Fetch API、模块导入、Service Worker）会因跨域或协议限制直接报错。Live Server 启动的是 http://localhost:xxxx 服务，模拟真实环境，让代码行为更贴近线上。
怎么安装和使用？
在 VSCode 扩展市场搜索 “Live Server”，点击安装即可。使用时只需右键点击任意 HTML 文件，选择 “Open with Live Server”，VSCode 会自动：
- 启动本地服务器（默认端口 5500）
- 在默认浏览器中打开该页面
- 监听文件变化，保存即刷新（无需手动操作）
常用配置技巧
可以通过设置自定义行为，比如改端口、设根目录、禁用自动打开浏览器等：
- 打开 VSCode 设置（Ctrl+,），搜索 “Live Server”
- 修改 “Settings > Live Server > Settings: Port” 指定端口
- 设置 “Settings: Root” 指定服务器根路径（适合多页项目）
- 关闭 “Settings: Auto Open Browser” 可避免每次启动都弹窗
注意几个小细节
Live Server 是轻量级开发服务器，不替代 webpack/vite 等构建工具。
- 它不处理 .ts、.jsx 编译，只服务静态文件
- 不支持热模块替换（HMR），仅全页刷新
- 如果项目有路由（如 React Router 的 BrowserRouter），需配合 “Settings: Custom Browser” 或使用 “Fallback to index.html” 选项避免 404
基本上就这些。对初学者和小型项目来说，Live Server 简单、可靠、开箱即用。
