vs code 默认不直接支持运行 html 文件，错误配置会导致“无法连接到本地主机”等问题；本文提供两种可靠方案：修正调试配置或使用轻量本地服务器。
在 VS Code 中直接“运行”HTML 文件时出现 Unable to connect to localhost 错误，根本原因在于调试配置（.vscode/launch.json）被误设为启动 Chrome 并访问 http://localhost:8080——但该端口并未实际运行 Web 服务，且配置中缺少对 HTML 文件的本地路径引用，反而可能因残留命令触发 JSON 文件误打开。
✅ 推荐方案一：修正 launch.json 配置（免服务器）
将原配置中依赖 url 的 Chrome 启动项，改为直接通过 file:// 协议打开本地 HTML 文件（无需启动本地服务）：
{
"name": "Open index.html in Chrome",
"request": "launch",
"type": "chrome",
"file": "${workspaceFolder}/index.html",
"runtimeExecutable": "chrome"
}⚠️ 注意事项：
- 确保已安装 Chrome 浏览器，且 chrome 可被系统命令行调用（Windows/macOS/Linux 通常默认支持）；
- 若使用 Edge 或 Firefox，需改用对应调试扩展（如 msedge-devtools），并调整 type 和 runtimeExecutable；
- ${workspaceFolder}/index.html 请根据实际文件名替换（如 about.html）；
- 删除或注释掉原 url: "http://localhost:8080" 相关配置，避免冲突。
✅ 推荐方案二：启用轻量本地 HTTP 服务器（更贴近真实环境）
直接双击 HTML 文件会受限于浏览器同源策略（如无法加载本地 JSON、CSS 模块等），因此开发阶段建议使用 HTTP 服务。推荐以下零配置方式：
? 使用 VS Code 插件（最简单）
安装官方推荐插件：Live Server（by Ritwick Dey）。安装后右键点击任意 HTML 文件 → 选择 “Open with Live Server”，自动启动 http://127.0.0.1:5500/your-file.html，支持热重载与跨域资源。
? 使用内置命令行（无需插件）
在终端中执行（确保已安装 Node.js）：
npx http-server -c-1 -o
该命令启动一个静态服务器，默认端口 8080，-c-1 禁用缓存，-o 自动打开浏览器。
? 为什么不建议用 XAMPP？
XAMPP 功能完整但过于重型，仅运行单个 HTML 文件时启动 Apache、MySQL 等服务纯属冗余，且需手动配置文档根目录和端口映射，增加出错概率。对于前端快速预览，Live Server 或 http-server 更轻量、安全、易维护。
? 总结：优先修正 launch.json 使用 file 字段直连浏览器，或安装 Live Server 插件——二者均能彻底解决“JSON 文件误开”与“localhost 连接失败”问题，且符合现代前端开发工作流。
立即学习“前端免费学习笔记（深入）”；
