live server 扩展通过启动本地 http 服务运行 html 文件，需安装后右键已保存的 .html 文件启用；默认端口 5500，支持真实浏览器环境，解决双击不执行、外部资源加载失败等问题。
点开 HTML 文件后直接右键“Open with Live Server”
VS Code 本身不带 HTML 运行环境，双击或用 code 命令打开 HTML 文件，只是显示源码——浏览器根本不会执行它。真正能“运行”的动作，是让本地起一个 HTTP 服务，把 index.html 当作根路径提供出去。Live Server 扩展就是干这个的，装完后右键文件就能触发。
- 必须先安装扩展：在 VS Code 扩展市场搜
Live Server（作者是 Ritwick Dey），装完重启侧边栏不影响 - 不能对未保存的临时文件（如
Untitled-1）右键启动，会报错Cannot open file: file:///.../Untitled-1 - 如果右键没出现该选项，检查是否在正确文件上右键（得是 .html 后缀，且已保存到磁盘）
- 默认端口是
5500，启动后底部状态栏会显示Go Live和当前地址，比如http://127.0.0.1:5500/index.html
不用插件时，用 VS Code 内置的“Preview”功能只适合静态查看
VS Code 自带的 Ctrl+Shift+V（windows/linux）或 Cmd+Shift+V（Mac）能预览 Markdown，但对 HTML 是“伪运行”：它用 VS Code 自己的渲染器解析 dom，不走真实浏览器引擎，不加载外部 CSS/js，也不支持 fetch、localStorage 或任何网络请求——你写的 axios.get('/api') 会直接报错 net::ERR_CONNECTION_REFUSED。
- 适合快速核对结构、文字、内联样式是否写错
- 一旦用了相对路径引入 JS（如
<script src="main.js"></script>），预览里脚本根本不会执行 - 所有
console.log都看不到，因为没连浏览器 DevTools
命令行起服务也能跑，但路径和端口容易出错
如果你不想装插件，又需要真实环境，可以用 Node.js 的 http-server 或 Python 的 http.server，但要注意工作目录和路由规则。
- Python 3 用户：终端进 HTML 所在目录，运行
python -m http.server 8000，然后访问http://localhost:8000/index.html；注意不是http://localhost:8000/（后者可能 404，除非有index.html在根目录） - Node.js 用户：全局装
http-server（npm install -g http-server），再运行http-server -p 3000，它默认把当前目录当根，自动找index.html - 常见坑：
http-server默认不支持跨域，调试 API 时会卡在CORS；Python 的http.server不支持 HTTP/2，某些现代特性无法测试
Live Server 的配置项会影响实际访问行为
Live Server 插件可以改默认行为，比如端口、是否自动打开浏览器、是否启用 https，这些全靠修改 VS Code 设置里的 liveServer.settings。
立即学习“前端免费学习笔记（深入）”；
- 想换端口？在设置中搜
liveServer.settings.port，改成比如8080，否则多个项目同时开会冲突 - 关闭自动弹浏览器：关掉
liveServer.settings.AdvanceCustomBrowserCmdLine或设为空字符串 - 如果项目结构是
/src/index.html，但你想以/src为根启动，需配置liveServer.settings.root为./src - 注意：配置改完要重启 Live Server（右键 →
Stop Live Server再重开），不是改了就实时生效
实际开发中，最常被忽略的是资源路径问题：你本地双击 HTML 能跑通的 ./assets/style.css，在 Live Server 下可能变成 http://localhost:5500/assets/style.css，而你的文件其实在 ./src/assets/。这时候要么调路径，要么调 root 配置——别硬扛着改几十个 src 和 href。