如何修改React项目端口，实现多个React项目同时运行？

当出现以下提示时，说明3000端口已被占用，无法再在该端口启动新的React项目：

系统提示信息：3000端口已被占用。

以下是几种可行的修改端口方案：

临时指定端口（单次生效） #

启动项目时直接在命令行指定端口：

• macOS/Linux 或 Windows PowerShell：

  PORT=3001 npm start
  

• Windows CMD：

  set PORT=3001 && npm start
  

• 使用yarn的话：

  PORT=3001 yarn start
  

修改package.json（永久生效，项目专属） #

打开项目根目录的package.json文件，找到scripts下的start命令，修改为对应端口的启动命令：

• macOS/Linux：

  "scripts": {
    "start": "PORT=3001 react-scripts start",
    // 其他命令不变
  }
  

• Windows：

  "scripts": {
    "start": "set PORT=3001 && react-scripts start",
    // 其他命令不变
  }
  

修改后执行npm start，项目会自动使用3001端口启动。

使用.env文件（更优雅的持久化配置） #

在项目根目录新建.env文件，添加一行配置：

PORT=3001

保存后启动项目，React会自动读取该配置并使用指定端口。

自定义Webpack配置（适用于eject后的项目） #

如果已经执行过npm run eject暴露了Webpack配置，打开webpack.config.js，找到devServer配置段，添加或修改port字段：

module.exports = {
  // 其他配置
  devServer: {
    port: 3001, // 指定新端口
    // 其他devServer配置
  }
}

内容的提问来源于stack exchange，提问作者ajaykcoder