live server是唯一推荐的日常开发方式，它通过http://127.0.0.1:5500启动本地http服务绕过file://协议限制，支持自动刷新；必须在编辑器中打开.html文件后右键选择open with live server，且launch.json中url须与服务地址完全一致。
VSCode 本身不运行 HTML，它只负责编辑；真正“运行”HTML 的是浏览器——但直接双击打开会卡在 file:// 协议限制里，JS 加载 JSON、ES 模块、fetch() 全部失败，报错像 net::ERR_FILE_PROTOCOL 或 CORS error。这不是你代码有问题，是浏览器故意拦的。
Live Server 插件：唯一推荐的日常开发方式
它起一个真正的本地 HTTP 服务器（比如 http://127.0.0.1:5500/index.html），绕过 file:// 限制，还带自动刷新。别用其他轻量插件凑合，它们多数没解决跨域或模块加载问题。
- 必须先在编辑器里打开某个
.html文件，右键菜单才出现Open with Live Server—— 在资源管理器里右键文件没用 - 端口被占时它会自动换，但建议提前配：打开设置（
Ctrl+,），搜liveServer.settings.port，填3000或8080 - 想用手机连同一 Wi-Fi 查看？设
liveServer.settings.host为0.0.0.0，再访问http://[电脑IP]:3000 - 项目结构是
src/index.html，但你想以src/为根目录？配liveServer.settings.root为"./src"
View In Browser 插件：只适合纯静态页快速预览
它不启服务器，只是调系统命令把当前文件用 file:// 路径扔进浏览器——适合没 JS、没 API、没模块的单页文档，比如写个 README.html。
- 安装后右键有
Open in Default Browser或Open in Other Browser - Windows 上可能触发
start命令，macOS 走open -a，Linux 用xdg-open，路径含空格或中文容易崩（虽新版已修复，但老系统仍可能报错） - 改完 HTML 必须手动刷新页面，不支持热重载
调试 JS 时，launch.json 得对上 Live Server 的地址
VSCode 默认的 Chrome 启动配置硬编码了 http://localhost:8080，而 Live Server 默认是 http://127.0.0.1:5500——两个地址不一致，断点就永远连不上。
- 在项目根目录建
.vscode/launch.json，用这个最小可用配置：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://127.0.0.1:5500/index.html",
"webRoot": "${workspaceFolder}"
}
]
}
url 必须和 Live Server 实际启动地址完全一致（包括端口、路径）最常被忽略的其实是路径上下文：Live Server 的根目录默认是当前 HTML 文件所在目录，不是 VSCode 工作区根目录；而 launch.json 里的 webRoot 影响的是源码映射，不是服务路径。这两者错位，断点就悬在半空。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
