前端项目编译运行的过程中端口出现了变化的问题

端口从 10000 变成 10001，通常意味着 10000 端口在上次运行后没有被正确释放，所以开发服务器自动分配了下一个可用端口。

💡 3种方法，即刻释放端口

你可以根据自己的情况选择最顺手的方法。

方法一：使用 npx kill-port 工具 (推荐)

这是最快的方法，无需查找进程 ID (PID)。

1. 在项目根目录或任意路径打开终端。
2. 执行以下命令，即可自动终止占用 10000 端口的进程：

   npx kill-port 10000
   

   注意：这个命令有时可能需要管理员权限才能生效。如果需要同时清理10000和10001，也可以执行 npx kill-port 10000 10001。

方法二：通过命令行手动终止

适合更习惯使用系统命令行操作的同学。

1. 查找进程ID (PID)：
   在终端中输入以下命令：

   netstat -ano | findstr :10000
   

image.png

2. 终止进程：
   根据上一步找到的PID，运行下面的命令来强制终止它：

   taskkill /PID 12345 /F
   

   （请将 12345 替换为实际的PID）。

方法三：在 HBuilderX 设置中修改

如果不想每次都手动清理，可以直接为你的项目设置一个固定端口。

• 推荐：修改 manifest.json
  最稳定的方法是在项目的 manifest.json 文件中进行配置：

  1. 打开项目根目录下的 manifest.json。
  2. 点击“源码视图”。
  3. 找到 "h5" 配置项，在其中添加或修改 devServer。如果没有则手动添加：

     "h5" : {
         "devServer" : {
             "port" : 10000,  // 你希望使用的端口号
             "https" : false
         }
     }
     

  4. 保存文件，重新运行项目，就会固定在你设置的端口。

• 其他辅助方法
  作为补充，你可以：

  • 重启 HBuilderX：有时简单的重启开发工具能解决这个问题。
  • 清理项目缓存：删除项目根目录下的 node_modules 和 dist 文件夹，然后重新 npm install，可以清理掉一些配置上的冲突。

✅ 如何验证端口是否已释放？

配置完成后，最好验证一下端口是否可用：

1. 按 Win + R，输入 cmd 并回车。
2. 输入 netstat -ano | findstr :10000 并回车。
3. 如果该命令没有返回任何结果，或返回的 TIME_WAIT 状态行很快消失，就表示端口已经成功释放，可以重新使用了。