Live Server 是 VSCode 中用于启动本地 HTTP 服务器并自动刷新的前端开发插件。它解决 file:// 协议下 Fetch、模块导入等功能受限问题，支持端口、根目录、浏览器等自定义配置，但不支持后端逻辑、构建流程和代理请求。
Live Server 是 VSCode 中最常用的前端开发辅助插件之一，它能一键启动本地开发服务器，自动刷新浏览器，省去手动刷新和配置服务器的麻烦。
为什么需要 Live Server？
写完 HTML/CSS/JS 后，直接双击打开文件会走 file:// 协议，很多功能（如 Fetch、模块导入、相对路径资源加载）会因跨域或协议限制而失效。Live Server 启动的是真正的 http://localhost:xxxx 服务，模拟真实部署环境，让代码行为更可靠。
怎么安装和使用？
在 VSCode 扩展市场搜索 “Live Server”，点击安装即可。安装后，右键点击任意 HTML 文件 → 选择 “Open with Live Server”，VSCode 会自动：
- 启动本地服务器（默认端口 5500，可自定义）
- 用默认浏览器打开该页面
- 监听文件变化，保存即刷新（无需手动点刷新按钮）
常用设置和小技巧
通过 VSCode 设置（settings.json）可以调整 Live Server 行为：
- “liveServer.settings.port”: 3000 —— 指定端口号
- “liveServer.settings.root”: “./src” —— 设置根目录，适合项目结构较深时
- “liveServer.settings.CustomBrowser”: “chrome” —— 指定默认浏览器
- “liveServer.settings.AdvanceCustomBrowserCmdLine”: “--incognito” —— 启动无痕模式，避免缓存干扰
它不解决什么？
Live Server 是轻量级开发服务器，适合静态页面和简单前端实验。它不支持：
- 后端逻辑（如 Node.js 接口、数据库）
- 构建流程（如 Webpack、Vite 的热更新 HMR）
- 代理请求（如转发 API 到后端服务）
基本上就这些——简单、顺手、不折腾，是新手入门和快速验证想法的好帮手。
