VS Code 中使用 Live Server 插件时若打开的是文件目录页而非预期的 HTML 页面，通常是因为项目缺少默认入口文件 index.html；将其设为根目录下的主页面即可自动加载。

vs code 中使用 live server 插件时若打开的是文件目录页而非预期的 html 页面，通常是因为项目缺少默认入口文件 `index.html`；将其设为根目录下的主页面即可自动加载。

当你在 VS Code 中点击“Go Live”启动 Live Server 后，浏览器却显示类似 Apache/Nginx 的文件列表（如 Index of /），而非你编写的网页，这并非插件故障，而是 Live Server 的默认行为所致。

Live Server 遵循 Web 服务器惯例：优先查找并自动加载根目录下的 index.html 文件作为首页。若该文件不存在，它将退而展示当前目录下的所有文件列表（Directory Listing），以避免 404 错误。

✅ 正确做法如下：

1. 确保你的项目根目录（即 VS Code 打开的文件夹）中存在一个名为 index.html 的 HTML 文件；
2. 将你实际开发的主页面重命名为 index.html（例如：将 my-page.html 改为 index.html）；
3. 保存后，右键点击任意 .html 文件 → 选择 “Open with Live Server”，或直接点击右下角 “Go Live” 按钮。

? 补充说明：

VS Code Node

通过作为 OpenClaw 节点连接的 VS Code/Cursor IDE 操作代码，提供 40 多种命令，涵盖文件操作、语言智能、Git、测试等功能。

下载

• Live Server 不支持自定义默认首页名称（如 home.html 或 main.html），除非通过修改插件配置（高级用法，不推荐初学者）；
• 若项目结构较深（如 src/index.html），请确保 VS Code 工作区根目录为 src 所在层级，否则 Live Server 仍会从外层目录开始查找 index.html；
• 修改文件名后，务必刷新浏览器（Live Server 会自动重载，但首次访问需确保 URL 指向根路径，如 http://127.0.0.1:5500/，而非带具体文件名的链接）。

示例项目结构（正确）：

my-website/
├── index.html      ← 必须存在且位于根目录
├── style.css
└── script.js

错误结构示例（将导致目录列表）：

my-website/
├── page.html         ← Live Server 不识别为首页
├── assets/
│   └── logo.png

总结：这不是 Bug，而是设计逻辑。坚持使用 index.html 作为项目入口，是保障 Live Server 正常运行最简单、最可靠的方式。