vscode本身不运行html，仅靠浏览器渲染；live server是唯一推荐方案，它启动http://127.0.0.1:5500本地服务绕过file://协议限制，支持fetch、import、热重载等，需右键已打开的html文件选择“open with live server”或点击状态栏go live按钮。
VSCode 本身不运行 HTML，它只编辑；真正“运行”HTML 的是浏览器，而 VSCode 需靠插件或外部命令把文件交给浏览器——直接双击或右键打开 file:// 协议页面，90% 的 JS 功能会失效（比如 fetch、import、XMLHttpRequest），报错类似 net::ERR_FILE_PROTOCOL 或 CORS error。
Live Server 是唯一推荐的开发态方案
它启动一个真正的本地 HTTP 服务（如 http://127.0.0.1:5500/index.html），绕过 file:// 协议限制，支持热重载、跨文件资源加载、ES 模块导入等现代前端开发必需能力。
- 必须先在 VSCode 中打开某个
.html文件（不是仅在资源管理器里选中），右键菜单才出现Open with Live Server - 状态栏右下角的
Go Live按钮也只对已打开的 HTML 编辑器生效 - 端口被占用时会自动跳转，但建议提前配好：在设置里搜
liveServer.settings.port，填入如3000 - 想用手机在同一 Wi-Fi 下访问？设
liveServer.settings.host为0.0.0.0，并关掉系统防火墙临时拦截
“Open in Browser”类插件只适合静态预览
像 Open in Browser、View In Browser 这类插件，本质就是调用系统命令打开 file:// 地址，和你双击文件没区别——它快、轻量，但 JS 加载 JSON、引入模块、发请求全会失败。
- 适合：纯 HTML+CSS 的静态稿、快速核对排版、无交互的演示页
- 不适合：任何含
fetch('/data.json')、import './utils.js'、new Worker('./worker.js')的项目 - Windows 上若用 Edge 打开
file://页面，JS 可能被静默禁用（尤其企业/教育版系统）
tasks.json 启动浏览器要避开路径陷阱
自定义任务能绕过插件，但容易因路径格式翻车。关键点不在“怎么写”，而在“怎么传”：
- Windows 下用
start命令时，第一个参数必须是空字符串（""），否则路径含空格会截断 - macOS/Linux 必须用
open -a "Google Chrome"或xdg-open，不能硬写可执行路径 - 别用
file://${workspaceFolder}/index.html—— 浏览器可能解析失败；改用file:///${workspaceFolder}/index.html（开头多一个/）更稳 - 如果项目根目录 ≠ 当前文件所在目录（比如你在
src/pages/a.html），${workspaceFolder}会指向错位置
真正复杂的地方从来不是“怎么启动”，而是“启动之后 JS 能不能跑通”。file:// 协议的限制是浏览器级硬规则，VSCode 插件再聪明也绕不过去——选方案前，先看你的 HTML 里有没有一行 fetch 或 import。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
