如何查看react项目端口

查看 React 项目端口的方法

React 项目的端口通常由开发服务器（如 webpack-dev-server 或 react-scripts）配置。以下是几种常见的方法：

检查 package.json 中的启动脚本 在项目的 package.json 文件中，查找 scripts 部分下的 start 命令。例如：

"scripts": {
  "start": "react-scripts start"
}

默认情况下，react-scripts 会使用端口 3000。如果需要自定义端口，可以修改启动命令：

"start": "set PORT=4000 && react-scripts start"

通过环境变量设置端口 在项目根目录创建 .env 文件，添加以下内容以指定端口：

PORT=4000

运行 npm start 后，项目将使用指定的端口。

运行时查看终端输出 启动开发服务器后，终端会显示项目运行的地址和端口。例如：

Compiled successfully!
You can now view my-app in the browser.
  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.100:3000

检查开发服务器配置 如果项目使用了自定义的 webpack 配置，可以在 webpack.config.js 中查找 devServer 配置项：

devServer: {
  port: 4000,
}

使用命令行工具查找占用端口的进程 如果端口被占用，可以通过以下命令查找占用端口的进程（以 Linux/macOS 为例）：

lsof -i :3000

Windows 系统可以使用：

netstat -ano | findstr :3000

修改默认端口的方法

如果需要修改默认端口，可以通过以下方式实现：

临时指定端口 在启动命令中直接指定端口：

PORT=4000 npm start

Windows 系统需要使用：

set PORT=4000 && npm start

永久修改端口 在 .env 文件中添加 PORT=4000，确保每次启动都使用该端口。

通过以上方法，可以轻松查看或修改 React 项目的运行端口。