推荐使用Live Server插件，安装后右键HTML文件选择Open with Live Server即可启动本地服务器并自动刷新；也可通过Node.js的http-server或Python内置服务快速搭建服务器预览页面。
VSCode 本身只是一个代码编辑器，不能直接运行服务器，但可以通过插件或外部工具快速启动本地服务器来预览 HTML 文件。以下是几种常用的配置方法，帮助你在 VSCode 中通过本地服务器运行 HTML 页面。
1. 使用 Live Server 插件（推荐）
Live Server 是 VSCode 最流行的插件之一，能一键启动本地开发服务器，并支持自动刷新功能。
操作步骤：- 打开 VSCode，点击左侧的扩展图标（或按 Ctrl+Shift+X）
- 搜索 Live Server，找到由 Ritwick Dey 开发的插件并安装
- 安装完成后，打开一个 HTML 文件
- 右键点击编辑器中的 HTML 文件，选择 Open with Live Server
- 浏览器会自动打开，地址类似 http://127.0.0.1:5500/your-file.html
- 无需额外配置，开箱即用
- 保存文件后页面自动刷新
- 支持静态资源访问（如 CSS、JS、图片）
2. 手动搭建简易本地服务器（Node.js + http-server）
如果你需要更灵活的控制，可以使用 Node.js 搭建本地服务器。
操作步骤：- 确保已安装 Node.js（可通过命令行输入 node -v 验证）
- 在终端运行命令全局安装 http-server：
npm install -g http-server - 进入你的项目目录，打开 VSCode 内置终端（Ctrl+~）
- 执行命令：http-server
- 浏览器访问提示的地址（通常是 http://127.0.0.1:8080）
- 适合学习 AJAX、Fetch 等需要 HTTP 协议的功能
- 跨项目通用，不依赖 VSCode 插件
3. 使用 Python 快速启动服务器
如果你已安装 Python，可以利用其内置的 HTTP 服务快速启动服务器。
立即学习“前端免费学习笔记（深入）”；
操作步骤：- 打开终端，进入 HTML 文件所在目录
- 若使用 Python 3，运行：python -m http.server 8000
- 浏览器访问：http://127.0.0.1:8000
- Python 默认端口为 8000，可自定义
- 适用于轻量级测试，无需安装额外包
4. 配置 VSCode 快捷启动任务（可选进阶）
你可以将启动服务器命令设置为 VSCode 的自定义任务，实现一键运行。
操作示例（以 http-server 为例）：- 在项目根目录创建 .vscode/tasks.json
- 添加一个 task，命令为 http-server -p 8080
- 通过 Ctrl+Shift+P → Tasks: Run Task 启动服务器
- 团队协作中统一开发环境
- 配合其他构建工具使用
基本上就这些常用方法。日常开发推荐使用 Live Server 插件，简单高效。涉及 API 调用或复杂路由时，可用 http-server 或 Python 方案。根据实际需求选择即可。
