react如何修改端口

修改 React 项目的端口

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

使用环境变量

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

PORT=5000

保存文件后重启开发服务器，应用将运行在指定的端口（例如 5000）。

通过启动命令指定端口

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

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

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

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

使用 react-scripts 配置

如果项目使用的是 react-scripts，可以通过修改 node_modules/react-scripts/scripts/start.js 文件中的默认端口配置。不过这种方法不推荐，因为修改 node_modules 中的文件会在重新安装依赖时丢失。

通过自定义开发服务器

对于更高级的需求，可以自行配置开发服务器。例如，使用 express 或 http-proxy-middleware 来设置自定义端口。以下是一个简单的 express 服务器示例：

const express = require('express');
const app = express();
const port = 5000;

app.use(express.static('build'));

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

注意事项

• 修改端口后，确保新端口未被其他应用程序占用。
• 对于生产环境，通常通过部署工具（如 nginx 或 Apache）配置端口，而非修改 React 项目本身。