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 自动打开浏览器。

windows-shell

Windows 命令行编码与兼容规范。涵盖 GBK/UTF-8 编码、PowerShell/pwsh 互操作、Python/Node.js、Git 配置及代码生成规则。适用于 Windows 10/11 + MSYS2/Git Bash 环境下的所有命令行操作。

下载

? 为什么不建议用 XAMPP？
XAMPP 功能完整但过于重型，仅运行单个 HTML 文件时启动 Apache、MySQL 等服务纯属冗余，且需手动配置文档根目录和端口映射，增加出错概率。对于前端快速预览，Live Server 或 http-server 更轻量、安全、易维护。

? 总结：优先修正 launch.json 使用 file 字段直连浏览器，或安装 Live Server 插件——二者均能彻底解决“JSON 文件误开”与“localhost 连接失败”问题，且符合现代前端开发工作流。

立即学习“前端免费学习笔记（深入）”；