react 后如何设置端口

修改默认端口的方法

在React项目中，默认的开发服务器端口通常是3000。如果需要更改端口，可以通过以下几种方式实现。

通过环境变量设置端口

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

PORT=5000

这会将开发服务器的端口更改为5000。确保变量名全大写，重启开发服务器后生效。

通过启动命令指定端口

在package.json的scripts部分，可以直接在启动命令中指定端口：

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

对于Linux/macOS系统，使用：

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

修改node_modules配置（不推荐）

在node_modules/react-scripts/scripts/start.js中查找以下代码并修改：

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;

将3000改为想要的端口号。这种方法会在重新安装依赖时失效。

创建自定义配置文件

对于更复杂的配置，可以创建react-scripts.config.js文件：

module.exports = {
  devServer: {
    port: 5000
  }
};

然后在package.json中引用该配置。

生产环境端口配置

对于生产环境，端口由部署的服务器决定。例如在使用Express时：

const express = require('express');
const app = express();
app.use(express.static('build'));
app.listen(5000);

多项目同时运行的处理

当需要同时运行多个React项目时，可以为每个项目设置不同端口以避免冲突。在各自的.env文件中指定不同端口号，或者通过启动命令临时指定：

PORT=5001 npm start