live server是唯一真正支持http服务的实时预览工具，它启动真实本地服务器（如http://127.0.0.1:5500），支持相对路径资源加载、ajax请求与热重载，而open in browser和browser-preview仅提供file://协议快照式预览，无法模拟生产环境行为。
直接用 Live Server，别折腾其他插件——它开箱即用、支持热重载、能局域网访问，且配置项足够细，覆盖绝大多数 HTML/CSS/JS 开发场景。
为什么不是 Open in Browser 或 browser-preview
Open in Browser 只是打开本地文件（file:// 协议），不启动服务器，所以无法加载相对路径的资源（比如 ./css/style.css）、不支持 AJAX 请求、也不触发 CORS 限制下的真实行为；vscode-browser-preview 虽然能渲染，但不监听文件变化，保存后不会自动刷新，本质是“快照式预览”，不是开发流。只有 Live Server 启动的是真实 HTTP 服务（默认 http://127.0.0.1:5500），所有路径解析、模块导入、fetch 请求都按生产环境逻辑走。
安装后必须做的三件事
装完插件不等于能用，这几个动作漏掉一个就卡在“点 Go Live 没反应”：
- 确保你当前打开的是**整个文件夹**（不是单个
index.html文件）——VS Code 必须识别出项目根目录，否则Live Server找不到index.html作为入口 - 右键点击编辑器里的
index.html文件，选Open with Live Server；或者点击底部状态栏的Go Live按钮——不要双击文件名、不要拖文件进 VS Code 窗口单独打开 - 检查端口是否被占用：如果提示
Port 5500 is already in use，就在settings.json里加一行："liveServer.settings.port": 8080
常见报错和对应解法
遇到这些提示别搜“怎么解决”，直接查配置或路径：
-
Cannot GET /：说明没找到默认首页，确认项目根目录下有index.html，或在settings.json中显式指定："liveServer.settings.file": "src/index.html" - 图片/JS/CSS 404：检查路径是否写成绝对路径（如
/img/logo.png），应改为相对路径（./img/logo.png）或确保liveServer.settings.root指向正确根目录 - 保存后没刷新：确认文件确实被保存（看标题栏有没有 *），VS Code 设置里关闭
files.autoSave的话，必须手动Ctrl+S
进阶：让预览更贴近真实部署
开发中常遇到“本地能跑，上线就挂”，几个关键配置可提前暴露问题：
- 启用 HTTPS 测试：加配置
"liveServer.settings.https": true（需配合本地证书，一般开发不用） - 模拟后端路由：用
liveServer.settings.CustomBrowserUrl指向代理地址，或搭配json-server启动 mock API - 禁用浏览器自动打开：设
"liveServer.settings.NoBrowser": true，方便你手动用不同浏览器测试兼容性
真正容易被忽略的，是路径解析逻辑——Live Server 默认以工作区根为 /，但你的构建脚本或框架（如 Vite、Webpack）可能设了 base，预览时路径对不上，调试前先比对网络面板里的请求 URL 是否和你预期一致。
