react如何修改端口

修改 React 项目的端口

React 项目默认使用端口 3000，可以通过以下方法修改端口：

通过环境变量修改

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

PORT=自定义端口号

例如：

PORT=4000

保存后重启开发服务器，应用将运行在指定的端口上。

通过启动命令修改

在 package.json 的 scripts 部分，可以直接指定端口：

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

对于 Linux/macOS 系统，使用以下格式：

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

通过配置文件修改（Create React App）

对于使用 Create React App 创建的项目，可以在 node_modules/react-scripts/scripts/start.js 中找到默认端口配置。但直接修改此文件不推荐，因为会被重新安装覆盖。建议优先使用环境变量或启动命令的方式。

使用 cross-env 跨平台兼容

安装 cross-env 以兼容不同操作系统：

npm install --save-dev cross-env

然后在 package.json 中修改脚本：

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

验证端口修改

运行以下命令启动项目：

npm start

检查浏览器是否成功打开 http://localhost:自定义端口号。