HBuilderX 提供了两种主要的 Web 服务器模式,它们适用于不同的场景：
- 静态 Web 服务器：最常用、最简单的方式，用于预览纯静态网页（HTML, CSS, JS）。
- 动态 Web 服务器：功能更强大，可以运行后端语言（如 Node.js, Java, PHP 等）,模拟真实的服务器环境。
下面我们分别详细介绍这两种模式。
静态 Web 服务器
这是 HBuilderX 的核心功能之一,非常方便。
什么是静态 Web 服务器？
它是一个轻量级的服务器，专门用于托管静态文件，它不会处理服务器端代码（如 PHP、JSP）,只会将你指定的文件夹中的文件原封不动地发送给浏览器。
如何启动静态 Web 服务器？
方法非常简单,有多种途径：
-
通过工具栏按钮（最常用）
- 打开 HBuilderX，并打开一个项目（可以是普通项目、uni-app 项目等）。
- 在顶部工具栏找到 运行 -> 运行到浏览器 -> 选择浏览器（如 Chrome、Edge）。
- 点击后，HBuilderX 会自动启动一个静态服务器，并在你选择的浏览器中打开项目根目录下的
index.html文件。
-
通过右键菜单
- 在项目资源管理器中，右键点击你想要作为网站根目录的文件夹（
src或www）。 - 在弹出的菜单中选择 运行到浏览器 -> 选择浏览器。
- 服务器会以你选中的文件夹为根目录启动。
- 在项目资源管理器中，右键点击你想要作为网站根目录的文件夹（
-
使用快捷键
- 默认快捷键是
Ctrl + R,然后选择浏览器。
- 默认快捷键是
静态服务器的特点
- 自动刷新：当你修改并保存 HTML、CSS 或 JS 文件后，浏览器会自动刷新页面，无需手动刷新,大大提升了开发效率。
- 跨域支持：默认情况下，它允许任何来源的请求,解决了开发中常见的跨域问题。
- 端口自动分配：HBuilderX 会自动寻找一个可用的端口（通常是
8080或8081）来启动服务,避免端口冲突。 - URL 访问：启动后，你会在 HBuilderX 的控制台和浏览器地址栏看到一个类似
http://127.0.0.1:8080/的本地地址。
动态 Web 服务器
当你的项目需要用到后端技术时，静态服务器就不够用了，这时需要使用动态 Web 服务器。
什么是动态 Web 服务器？
它不仅能提供静态文件，还能运行后端代码，你可以用它来运行一个 Node.js Express 服务器，或者一个 Java Spring Boot 应用，HBuilderX 内置了对多种后端语言运行环境的支持。
如何配置和使用动态 Web 服务器？
以最流行的 Node.js 为例：
步骤 1：安装 Node.js 环境 确保你的电脑已经安装了 Node.js，如果没有，请从 Node.js 官网 下载并安装。
步骤 2：创建一个 Node.js 项目
-
在 HBuilderX 中新建一个项目，选择 普通项目。
-
在项目中，创建一个
server.js文件，并写入以下简单的 Node.js 代码：const http = require('http'); const fs = require('fs'); const path = require('path'); const server = http.createServer((req, res) => { // 设置响应头 res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' }); // 读取并返回 index.html const filePath = path.join(__dirname, 'index.html'); fs.readFile(filePath, (err, data) => { if (err) { res.writeHead(404); res.end('文件未找到'); } else { res.end(data); } }); }); const PORT = 3000; server.listen(PORT, () => { console.log(`服务器正在运行，访问 http://127.0.0.1:${PORT}/`); }); -
再在同一目录下创建一个
index.html文件,写入一些内容，<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Node.js 服务器测试</title> </head> <body> <h1>你好，世界！</h1> <p>这个页面由 Node.js 服务器提供。</p> </body> </html>
步骤 3：在 HBuilderX 中运行 Node.js 服务器
- 在 HBuilderX 的底部，找到并切换到 运行 视图（或 控制台 视图）。
- 在视图的右上角，点击 运行配置 下拉菜单。
- 选择 运行配置。
- 在弹出的对话框中，点击左下角的 号，选择 Node.js。
- 在配置界面中：
- 名称：给你的配置起个名字，
My Node Server。 - 程序：点击右侧的文件夹图标，选择你刚刚创建的
server.js文件。 - 工作目录：通常保持默认即可，它会自动设置为
server.js所在的目录。 - 端口：可以设置，也可以不设（让 Node.js 程序自己决定）。
- 名称：给你的配置起个名字，
- 点击 确定 保存配置。
- 回到 运行 视图，选择你刚刚创建的
My Node Server配置，然后点击绿色的 运行 按钮（或按F5）。
步骤 4：查看结果
HBuilderX 的控制台会输出 Node.js 服务器的启动信息，并显示访问地址 http://127.0.0.1:3000/，点击这个地址,浏览器就会打开你的页面。
两种服务器的对比总结
| 特性 | 静态 Web 服务器 | 动态 Web 服务器 |
|---|---|---|
| 用途 | 预览和调试纯前端项目（HTML, CSS, JS） | 运行包含后端逻辑的全栈项目 |
| 启动方式 | 一键式，非常快捷 | 需要预先安装后端环境，并手动配置 |
| 后端支持 | 无 | 支持 Node.js, Java, PHP, Python 等 |
| 适用项目 | 静态页面、Vue/React/Angular 项目（通过 devServer）、uni-app 项目 | Express/Koa 项目、Java Web 项目、PHP 项目等 |
| 配置复杂度 | 极低 | 较高，需要理解后端运行方式 |
常见问题与技巧
-
Q: 我想修改服务器端口怎么办？
- 静态服务器：暂时无法在 HBuilderX UI 中直接修改，但可以通过修改项目配置（如
manifest.json中的devServer配置，但这通常用于 Vue CLI 等工具链）或使用更高级的配置，对于简单开发,默认端口通常够用。 - 动态服务器：在 Node.js 代码中，你可以修改
listen方法的端口号，或者在 HBuilderX 的运行配置中指定端口。
- 静态服务器：暂时无法在 HBuilderX UI 中直接修改，但可以通过修改项目配置（如
-
Q: 静态服务器如何指定默认打开的文件？
- 它默认会打开项目根目录下的
index.html，如果你想打开其他文件，可以先在 HBuilderX 中双击打开该文件，然后再点击“运行到浏览器”按钮,它会优先打开当前激活的文件。
- 它默认会打开项目根目录下的
-
Q: 如何停止服务器？
- 对于静态服务器，关闭浏览器或 HBuilderX 中的运行标签页即可。
- 对于动态服务器，在 HBuilderX 的 运行 视图中，点击红色的 停止 按钮即可。
HBuilderX 的 Web 服务器功能是一个强大的本地开发工具，熟练掌握静态和动态两种模式，可以极大地提高你的全栈或前端开发效率，对于纯前端开发，静态服务器是你的首选；一旦涉及后端,动态服务器就能帮你快速搭建和调试完整的应用。
