必须用 live server，因其通过 http://127.0.0.1 启动本地服务器，规避 file:// 协议导致的 cors、es 模块解析失败、相对路径异常等问题，真实模拟线上环境。
VSCode 本身不运行 HTML，它只负责编辑；所谓“运行”，本质是快速唤起浏览器并加载文件——关键在于绕过 file:// 协议限制、避免手动刷新、减少鼠标操作。Live Server 是唯一能同时满足这三点的方案，其他方式都只是临时凑合。
为什么必须用 Live Server 而不是双击打开
直接双击或拖拽 HTML 文件进浏览器，走的是 file:// 协议，会导致：
-
fetch()请求本地 JSON 或 API 时直接报CORS错误（浏览器拒绝跨源请求） -
importES 模块失败，提示Failed to resolve module specifier - 相对路径跳转（如
<a href="about.html"></a>）在某些浏览器里失效 - 无法测试真实服务端行为（比如 cookie、重定向、HTTP 头）
Live Server 启动的是 http://127.0.0.1:5500/xxx.html 这类本地 HTTP 服务，完全模拟线上环境。
Live Server 的三种触发方式及坑点
安装插件后，有三种常用启动入口，但行为和适用场景不同：
- 右键菜单 → “Open with Live Server”：最稳妥，每次都会新开一个服务实例（端口自动递增），适合多项目并行调试
-
状态栏右下角 “Go Live” 按钮：只对当前活动的 HTML 文件生效；如果切换到 JS/CSS 文件再点，会报错
No HTML file found in workspace -
快捷键绑定：在设置中搜索
Live Server: Open with Live Server，分配如Ctrl+Alt+L；但注意——快捷键只在 HTML 文件被聚焦时才有效，切到终端或设置页就失灵
常见失败原因：index.html 标题栏带 * 号（没保存）、文件名含中文或空格（如 我的页面.html）、插件未启用（检查扩展面板右上角是否显示「已启用」）。
不装插件时的最小可行方案
如果网络受限或公司策略禁用扩展，可用终端命令替代，但需提前装好 Node.js：
- 在 HTML 所在目录打开 VS Code 终端（
Ctrl+`），执行：npx serve -s（首次会自动下载serve） - 或更轻量：
npx http-server -c-1（-c-1表示禁用缓存，避免改了 JS 看不到效果） - Windows 用户可配
tasks.json直接调用系统命令："command": "cmd", "args": ["/c", "start", "${file}"]，但仍是file://协议，仅限纯静态结构验证
这类命令没有自动刷新，每次改完得手动按 F5；且 npx 命令首次执行较慢，别误以为卡死。
端口冲突与浏览器指定的实际配置项
默认端口 5500 被占用时，Live Server 不会报错，而是静默换到 5501，但新手常因此找不到页面。可在设置中固定端口：
- 搜索
liveServer.settings.port，填入如8080 - 指定浏览器：搜
liveServer.settings.CustomBrowser，值设为"chrome"或"edge"（大小写敏感，不能写Chrome） - 若想让所有 HTML 文件默认用 Live Server 打开（省去右键步骤），开启
liveServer.settings.AdvanceCustomBrowserCmdLine并填浏览器路径，但不如快捷键可靠
真正容易被忽略的是：Live Server 的自动刷新只监听同目录下的 .html、.css、.js 文件；如果 JS 在 src/ 子目录，需手动在设置里加监听路径，否则改了不刷新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
