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="/>，会强制所有相对路径从根开始解析，容易导致 JS/CSS 404；这种情况下建议删掉<base>标签，或把整个项目挪到根目录再试 - 插件不处理构建产物（如
dist/），不要试图右键dist/index.html并指望它自动加载dist/js/xxx.js——它只管当前文件及其同级目录
Live Server 的边界很清晰：它只是个静态文件服务器，不编译、不代理、不热更新模块。如果你项目已用 Vite 或 Webpack，就该关掉它，别和原生 dev server 混用——端口抢夺和缓存混乱才是真坑。
