WebStorm 的 Web 服务器是什么？
WebStorm 内置了一个轻量级的 HTTP 服务器，它的主要作用是：
- 本地预览：将你的静态文件（HTML, CSS, JavaScript, 图片等）通过一个真实的 URL（如
http://localhost:63342）在浏览器中打开，而不是直接通过file://协议。 - 解决跨域问题：当你本地的前端项目需要请求另一个端口或域名的后端 API 时，使用
file://协议会因浏览器的安全策略（同源策略）而产生跨域错误，WebStorm 的服务器可以解决这个问题。 - 提供开发环境：它提供了一个标准的 Web 环境，方便你使用浏览器开发者工具进行调试。
如何启动和使用 WebStorm 的 Web 服务器？
操作非常简单,主要有两种方式：
使用“运行”按钮（最常用）
这是最直接、最快捷的方法。
-
打开你的项目：在 WebStorm 中打开你的前端项目文件夹。
-
找到 HTML 文件：在项目文件树中，找到你的主 HTML 文件（
index.html）。
（图片来源网络，侵删） -
点击“运行”按钮：在 HTML 文件的编辑器窗口右上角，你会看到一个绿色的 “运行” 按钮（一个三角形图标）。
-
选择“在 'host' 上运行”：点击该按钮后，会弹出一个下拉菜单，选择 "在 'host' 上运行"（Run on 'host'）。
-
自动打开浏览器：WebStorm 会自动启动内置的 HTTP 服务器，并在默认浏览器中打开你的 HTML 文件，地址类似于
http://localhost:63342/your-project/index.html?_ijt=...。
注意：URL 中通常会带有一个 _ijt=... 的查询参数，这是 WebStorm 用于跟踪会话的，通常可以忽略。
使用“打开”按钮
这种方式主要用于快速预览,不会将服务器与特定的运行/调试配置绑定。
- 同样,在项目文件树中找到你的 HTML 文件。
- 点击右上角的 “打开” 按钮（一个带箭头的方框图标）。
- 选择 "在 'host' 上打开"（Open on 'host'）。
这同样会在浏览器中通过 WebStorm 服务器打开你的文件。
高级配置：自定义服务器行为
WebStorm 允许你对服务器进行更细致的配置，以满足不同的开发需求，这些配置都在 “运行/调试配置” 中完成。
-
打开配置窗口：
- 点击顶部菜单栏的 “运行” -> “编辑配置...” (Run -> Edit Configurations...)。
- 或者,在运行/调试工具栏的下拉菜单中选择 “编辑配置...”。
-
找到内置服务器配置：
- 在弹出的窗口左侧,你会看到一个名为 "host" 的配置，这就是 WebStorm 的内置服务器配置。
-
关键配置项详解：
-
端口：
- 默认端口是
63342，如果这个端口被占用，WebStorm 会自动尝试63343、63344等。 - 你可以手动指定一个固定的端口号,方便团队成员统一，或者避免与其他服务冲突。
- 默认端口是
-
浏览器：
可以指定使用哪个浏览器打开页面,Chrome, Firefox, Edge 等，选择 "Default" 会使用系统默认浏览器。
-
URL 路径：
- 这是 非常重要 的一项，它决定了服务器根目录下的哪个文件作为入口。
- 默认情况下,它指向你的 HTML 文件，如
/index.html。 - 你可以修改它,如果你想访问
http://localhost:63342/my-page时直接加载src/views/home.html，你可以将 URL 路径设置为/my-page并将浏览器 URL 指向这个路径，但更常见的做法是保持默认，直接访问文件。
-
映射：
- 这是 最强大、最常用 的功能之一，用于解决跨域和代理请求。
- 它可以将服务器上的一个请求路径 映射 到另一个 URL（通常是你的后端 API 服务器）。
- 配置示例：
- 假设你的前端项目运行在
http://localhost:63342。 - 你的后端 API 服务器运行在
http://localhost:3000。 - 你的前端 JavaScript 代码中有一个 API 请求：
fetch('/api/users')。 - 如果不配置映射,这个请求会发往
http://localhost:63342/api/users，导致 404 错误。 - 解决方法：在 "映射" 选项卡中，添加一条规则：
- 路径：
/api/*（表示所有以/api/开头的请求） - 到 URL：
http://localhost:3000/$1（$1是一个占位符，代表 匹配到的部分，即users）
- 路径：
- 这样,当你的前端代码请求
/api/users时，WebStorm 服务器会自动将其代理到http://localhost:3000/users，完美解决跨域问题。
- 假设你的前端项目运行在
-
目录：
- 指定服务器的根目录,默认是你的整个项目文件夹，你可以将其修改为项目中的某个子目录，
public或dist。
- 指定服务器的根目录,默认是你的整个项目文件夹，你可以将其修改为项目中的某个子目录，
-
与 Node.js 服务器的区别
很多开发者会混淆 WebStorm 内置的 Web 服务器和 Node.js（如 Express, Koa）创建的服务器，它们有本质区别：
| 特性 | WebStorm 内置服务器 | Node.js 服务器 (如 Express) |
|---|---|---|
| 目的 | 静态文件服务器，主要用于开发和预览前端静态资源。 | 全栈应用服务器，可以处理动态请求、数据库交互、业务逻辑等。 |
| 功能 | 只能提供文件服务，支持简单的路径映射（代理）。 | 功能强大，是真正的后端服务，可以构建完整的 Web 应用。 |
| 启动方式 | 通过 WebStorm 的 UI 按钮一键启动。 | 需要安装 Node.js，在终端中运行 npm start 或 node server.js。 |
| 调试 | 主要用于调试前端代码（JS, CSS）。 | 可以同时调试前端和后端代码，是全栈开发的核心。 |
- 只用静态 HTML/CSS/JS 项目：WebStorm 内置服务器完全够用，非常方便。
- 包含 API 请求的前端项目：可以使用 WebStorm 服务器的 “映射” 功能来代理 API 请求，实现前后端分离开发。
- 全栈项目（前端 + Node.js 后端）：你应该分别启动两个服务器：
- 使用
npm start启动你的 Node.js 后端服务器。 - 使用 WebStorm 的 “运行” 按钮启动前端服务器，并配置“映射”将 API 请求代理到你的 Node.js 服务器（
http://localhost:3000）。
- 使用
常见问题与解答
Q: 为什么我的图片或 CSS 文件加载不出来？ A: 这通常是因为 文件路径问题，在 HTML 中，请使用 相对路径。
- 错误：
<script src="C:/Users/.../project/js/main.js"></script> - 正确：
<script src="js/main.js"></script>或<script src="./js/main.js"></script>WebStorm 服务器是基于项目根目录的，所以相对路径才能正确解析。
Q: 如何关闭 WebStorm 服务器？ A: 点击运行/调试工具栏上的 “停止” 按钮（红色的正方形图标）。
Q: 我可以同时运行多个项目吗？ A: 可以，WebStorm 会为每个项目分配不同的端口（如 63342, 63343...），互不干扰。
希望这份详细的指南能帮助你更好地使用 WebStorm 的 Web 服务器！
