vs code 不运行 html，仅编辑文件；需通过浏览器加载渲染，关键在于协议（file:// 或 http://）及是否需要服务端能力。live server 插件启动本地 http 服务器（如 http://127.0.0.1:5500），绕过 file:// 的跨域与模块限制，是解决静态资源加载失败、js 报错等问题的唯一可靠方式。
VS Code 本身不运行 HTML，它只编辑文件；要“运行”HTML，本质是让浏览器加载并渲染它——关键在于用什么方式加载（file:// 还是 http://），以及是否需要服务端能力（如 AJAX、模块导入、相对路径资源）。选错方式会导致图片不显示、CSS 不生效、JS 报跨域错误，甚至本地 API 调用直接失败。
Live Server 插件：解决 file:// 协议限制的唯一可靠方式
直接双击打开 HTML 文件走的是 file:// 协议，浏览器会禁用 fetch、XMLHttpRequest、import 模块、service worker 等功能，并可能拒绝加载本地 CSS/JS（尤其含相对路径时）。Live Server 启动的是真正的本地 HTTP 服务器（默认 http://127.0.0.1:5500），绕过所有这些限制。
- 必须在已打开的 HTML 文件编辑器内右键 → Open with Live Server；在资源管理器里右键 HTML 文件选这个选项无效
- 状态栏右下角出现
Go Live按钮，点它等效于右键操作，但前提是当前活动标签页是 HTML 文件 - 端口被占用时会自动递增（5500 → 5501），无需手动改配置；如需固定端口，可在 VS Code 设置中搜索
liveServer.settings.port修改 - 修改保存后自动刷新，但仅限当前页面；若页面含 iframe 或弹窗，它们不会自动重载
Open In Default Browser 右键菜单：只适合纯静态、无外部依赖的单页
这是 VS Code 内置功能（无需插件），右键资源管理器里的 .html 文件即可看到。它生成的是 file:///path/to/index.html 链接，浏览器直接读取磁盘文件。
- 优点：零配置、秒开、适合快速验证排版或基础 DOM 结构
- 缺点：一旦 HTML 中有
<script type="module"></script>、fetch('./data.json')、import './utils.js'，控制台立刻报错 - Windows 下若路径含中文或空格，部分浏览器（如旧版 Edge）可能解析失败；macOS/Linux 对空格更敏感
- 无法调试 service worker，因为
file://不被视为安全上下文
自定义 tasks.json 启动指定浏览器：可控但易出错
适合需要固定用 Chrome 而非默认浏览器、或需传参（如 --disable-web-security）的调试场景，但跨平台命令差异大，新手容易卡在路径和引号上。
- Windows 示例任务：
"command": "cmd", "args": ["/c", "start", "chrome.exe", "--new-window", "file://${workspaceFolder}/${relativeFile}"] - macOS 必须用
open -a "Google Chrome"，且路径需转为file://格式，${workspaceFolder}要用$(pwd)替换才可靠 - Linux 用户注意：
xdg-open不接受file://带空格路径，得先用printf '%s' "${file}" | sed 's/ /%20/g'编码 - 所有平台都需确保浏览器可执行文件在 PATH 中，否则要写绝对路径（如
C:\Program Files\Google\Chrome\Application\chrome.exe）
真正复杂的地方不在“怎么打开”，而在于你打开后发现 JS 报错、图片不显示、接口 404 —— 那大概率不是 VS Code 的问题，而是你没意识到 file:// 和 http:// 是两个世界。别急着换工具，先看控制台报什么错，再决定该用 Live Server 还是检查路径写法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
