当前位置：首页 > news >正文

VS Code 会自动启动一个本地开发服务器

news 2026/4/30 8:14:30

在 VS Code 中运行前端代码主要有几种方式，具体取决于你开发的项目类型和需求。以下是几种常用方法：

使用 Live Server 插件（推荐用于静态网页）‌：

这是最简单快捷的方式，尤其适合开发静态 HTML、CSS 和 JavaScript 页面。
安装 Live Server 插件（在 VS Code 扩展市场搜索并安装由 Ritwick Dey 开发的插件）。
在 VS Code 中打开你的项目文件夹。
打开一个 HTML 文件。
右键点击该 HTML 文件，在上下文菜单中选择 “Open with Live Server” 或点击右下角的 “Go Live” 按钮。
VS Code 会自动启动一个本地开发服务器（通常是 http://127.0.0.1:5500），并在默认浏览器中打开页面。修改文件后，页面会自动刷新。

使用内置调试器（用于调试浏览器中的 JavaScript）‌：
https://gitee.com/hacker_66/11/issues/IJGWQD

这种方式需要配合一个本地 HTTP 服务器（如 Live Server 或 http-server）来提供 HTML 文件。
确保你已安装 Microsoft Edge 或 Google Chrome 浏览器。
在 VS Code 中打开你的项目文件夹。
按 Ctrl+Shift+P 打开命令面板，输入 “Debug: Open launch.json” 并选择创建 launch.json 文件。
选择 “Chrome” 或 “Edge” 作为环境。
修改生成的 launch.json 文件中的 url 字段为你的服务器地址（例如 http://localhost:5500）和 webRoot 字段为你的项目根目录（例如 "${workspaceFolder}"）。
例如：
json
Copy Code
{
https://gitee.com/hacker_66/11/issues/IJGWQG
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome", // 或 "chrome"
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5500", // 确保与你的服务器地址一致
"webRoot": "${workspaceFolder}" // 确保指向你的项目根目录
}
]
}

在 HTML 文件的 <script> 标签内或外部 JS 文件中设置断点。
按 F5 或点击调试视图中的绿色运行按钮启动调试会话。VS Code 会自动启动浏览器并加载页面，当执行到断点时会暂停。

运行 Node.js 后端服务器（用于包含后端逻辑的项目）‌：

如果你的前端项目需要一个 Node.js 后端服务器（例如 Express.js 应用），你需要先启动服务器。
在 VS Code 的集成终端（Ctrl+``）中运行 npm run dev或node main.js` 等命令来启动服务器。
然后，如果需要调试 Node.js 代码，可以配置 launch.json 文件。例如：
json
Copy Code
{
https://gitee.com/hacker_66/11/issues/IJGWQJ
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Server",
"program": "${workspaceFolder}/main.js",
"skipFiles": ["<node_internals>/**"]
}
]
}

在 VS Code 中按 F5 或点击调试按钮启动调试会话。

使用终端命令启动服务器‌：

如果你使用的是像 Vite、Create React App 等现代构建工具，通常可以通过 npm run dev 或 yarn dev 命令启动开发服务器。
在 VS Code 终端中运行这些命令。
为了调试 npm run dev 启动的脚本，可以配置 launch.json，选择 "Node.js: Launch via NPM" 类型，并指定 runtimeArgs 为 "run-script" 和 "dev"。
json
Copy Code
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "dev"],
"skipFiles": ["<node_internals>/**"]
}
]
}