vscode如何运行本地HTML文件_vscode运行本地HTML文件的详细操作流程-VSCode-PHP中文网

vscode如何运行本地HTML文件_vscode运行本地HTML文件的详细操作流程

蓮花仙者

发布： 2025-11-05 09:21:02

原创

394人浏览过

答案：在VSCode中运行HTML文件需安装软件并打开项目，创建或编辑HTML文件后，通过安装“Open in Browser”插件右键打开，或手动拖入浏览器，也可用Live Server实现保存自动刷新。

vscode如何运行本地html文件_vscode运行本地html文件的详细操作流程

在 VSCode 中运行本地 HTML 文件并不需要复杂的配置，只需要借助浏览器即可快速查看页面效果。以下是详细的操作流程。

1. 安装 VSCode 并打开项目文件夹

确保你已经安装了 Visual Studio Code。打开软件后，点击左上角的“文件” → “打开文件夹”，选择存放 HTML 文件的目录，将整个项目导入编辑器中。

2. 创建或打开 HTML 文件

在资源管理器中点击右键，选择“新建文件”，命名为 index.html 或其他以 .html 结尾的文件名。输入以下基础代码作为测试：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>测试页面</title>
</head>
<body>
  <h1>Hello, 这是本地 HTML 页面！</h1>
</body>
</html>

登录后复制

3. 使用浏览器打开 HTML 文件

VSCode 本身不内置服务器或预览功能，但你可以通过以下方式运行 HTML 文件：

一览运营宝

一览“运营宝”是一款搭载AIGC的视频创作赋能及变现工具，由深耕视频行业18年的一览科技研发推出。

查看详情

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

方法一：右键用浏览器打开（推荐安装扩展）
安装插件 “Open in Browser”：在扩展面板搜索 “Open in Browser”，点击安装。安装完成后，在 HTML 文件中右键选择 “Open in Default Browser”，文件会自动在默认浏览器中打开。
方法二：手动拖拽到浏览器
在资源管理器中右键 HTML 文件，选择“在资源管理器中显示”，然后把文件拖进 Chrome、Edge 等浏览器窗口，即可查看效果。
方法三：通过文件路径访问
复制 HTML 文件的本地路径（如：file:///D:/project/index.html），粘贴到浏览器地址栏回车打开。