live server插件需安装启用、以文件夹形式打开项目、右键已保存的.html文件才生效；默认监听5500端口并自动刷新，支持自定义端口、浏览器及根路径，但不处理构建产物或替代vite/webpack等开发服务器。
VSCode 本身不带本地服务器功能，必须靠插件实现；最常用、最轻量的是 Live Server，它开箱即用，不用命令行、不依赖全局 npm 包，适合纯静态页或简单前端调试。
为什么选 Live Server 而不是 live-server 命令行？
live-server 是一个全局 npm 包，需要执行 npm install -g live-server，然后在终端里手动运行命令。它启动后监听默认端口（8080），但无法直接从 VSCode 文件资源管理器右键触发，也不集成到编辑器 UI 中。
Live Server 插件则不同：安装后，右键 HTML 文件就能“Open with Live Server”，自动打开浏览器并监听文件变化，保存即刷新——这才是真正贴合 VSCode 工作流的本地服务器方案。
- 它不改项目结构，不生成额外配置文件
- 支持自定义端口、根路径、浏览器类型（比如强制用
chrome） - 不会和 webpack-dev-server、vite dev 等开发服务器冲突，可共存
安装后怎么配置才能避免端口占用或路径错误？
默认配置通常够用，但遇到 Address already in use 或页面 404，大概率是根路径或端口没对齐。
- 右键 HTML 文件 → “Open with Live Server” 启动时，插件会以该文件所在目录为根目录提供服务；如果项目有
index.html在子目录（如src/index.html），就别从根目录右键，而要进到src目录再右键 - 修改端口：在 VSCode 设置里搜
liveServer.settings.port，填入未被占用的数字（如5500） - 指定默认浏览器：设置项
liveServer.settings.CustomBrowser设为"chrome"或"edge"，避免弹出 IE 或系统默认旧浏览器 - 禁用标签校验（防误报）：设
liveServer.settings.donotVerifyTags为true，尤其当你写非标准 HTML 或模板片段时
Live Server 启动后页面空白或报错 404 怎么办？
常见原因不是插件坏了，而是路径解析逻辑和你的文件组织不匹配。
- 确保你右键的是一个真实存在的
.html文件，而不是未保存的临时 tab（标题带 * 号） - 检查 URL 地址栏路径：Live Server 默认以文件所在目录为
/，所以src/index.html启动后地址是http://127.0.0.1:5500/，但它的相对资源（如./js/app.js）必须相对于src/目录存在 - 如果用了
<base href="/>%EF%BC%8C%E4%BC%9A%E5%BC%BA%E5%88%B6%E6%89%80%E6%9C%89%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E4%BB%8E%E6%A0%B9%E5%BC%80%E5%A7%8B%E8%A7%A3%E6%9E%90%EF%BC%8C%E5%AE%B9%E6%98%93%E5%AF%BC%E8%87%B4%20JS/CSS%20404%EF%BC%9B%E8%BF%99%E7%A7%8D%E6%83%85%E5%86%B5%E4%B8%8B%E5%BB%BA%E8%AE%AE%E5%88%A0%E6%8E%89%20<base>%20%E6%A0%87%E7%AD%BE%EF%BC%8C%E6%88%96%E6%8A%8A%E6%95%B4%E4%B8%AA%E9%A1%B9%E7%9B%AE%E6%8C%AA%E5%88%B0%E6%A0%B9%E7%9B%AE%E5%BD%95%E5%86%8D%E8%AF%95 - %E6%8F%92%E4%BB%B6%E4%B8%8D%E5%A4%84%E7%90%86%E6%9E%84%E5%BB%BA%E4%BA%A7%E7%89%A9%EF%BC%88%E5%A6%82%20
dist/%EF%BC%89%EF%BC%8C%E4%B8%8D%E8%A6%81%E8%AF%95%E5%9B%BE%E5%8F%B3%E9%94%AE%20dist/index.html%20%E5%B9%B6%E6%8C%87%E6%9C%9B%E5%AE%83%E8%87%AA%E5%8A%A8%E5%8A%A0%E8%BD%BD%20dist/js/xxx.js%E2%80%94%E2%80%94%E5%AE%83%E5%8F%AA%E7%AE%A1%E5%BD%93%E5%89%8D%E6%96%87%E4%BB%B6%E5%8F%8A%E5%85%B6%E5%90%8C%E7%BA%A7%E7%9B%AE%E5%BD%95
Live%20Server%20%E7%9A%84%E8%BE%B9%E7%95%8C%E5%BE%88%E6%B8%85%E6%99%B0%EF%BC%9A%E5%AE%83%E5%8F%AA%E6%98%AF%E4%B8%AA%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6%E6%9C%8D%E5%8A%A1%E5%99%A8%EF%BC%8C%E4%B8%8D%E7%BC%96%E8%AF%91%E3%80%81%E4%B8%8D%E4%BB%A3%E7%90%86%E3%80%81%E4%B8%8D%E7%83%AD%E6%9B%B4%E6%96%B0%E6%A8%A1%E5%9D%97%E3%80%82%E5%A6%82%E6%9E%9C%E4%BD%A0%E9%A1%B9%E7%9B%AE%E5%B7%B2%E7%94%A8%20Vite%20%E6%88%96%20Webpack%EF%BC%8C%E5%B0%B1%E8%AF%A5%E5%85%B3%E6%8E%89%E5%AE%83%EF%BC%8C%E5%88%AB%E5%92%8C%E5%8E%9F%E7%94%9F%20dev%20server%20%E6%B7%B7%E7%94%A8%E2%80%94%E2%80%94%E7%AB%AF%E5%8F%A3%E6%8A%A2%E5%A4%BA%E5%92%8C%E7%BC%93%E5%AD%98%E6%B7%B7%E4%B9%B1%E6%89%8D%E6%98%AF%E7%9C%9F%E5%9D%91%E3%80%82
%0A">
