react如何修改端口

修改 React 项目端口的方法

React 项目默认使用 3000 端口启动开发服务器，但可以通过以下方法修改端口。

通过环境变量修改端口

在项目根目录下创建或修改 .env 文件，添加以下内容：

PORT=4000

保存后重新启动项目，开发服务器将在 4000 端口运行。

通过启动命令临时指定端口

在 package.json 的 scripts 部分，可以修改启动命令：

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

对于 Linux/macOS 系统，使用：

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

通过配置文件修改端口（适用于 create-react-app）

在 node_modules/react-scripts/scripts/start.js 中查找 DEFAULT_PORT 定义，直接修改默认端口值。但这种方法不推荐，因为修改 node_modules 内容会在重新安装依赖时丢失。

使用跨平台解决方案

安装 cross-env 包，可以跨平台设置环境变量：

npm install --save-dev cross-env

然后在 package.json 中修改：

"scripts": {
  "start": "cross-env PORT=4000 react-scripts start"
}

验证端口是否生效

修改后运行项目：

npm start

在浏览器中访问 http://localhost:4000 确认修改成功。如果端口被占用，会显示错误信息，需要选择其他端口。