如何将 react 中的默认端口从 3000 更改为另一个端口？

在使用React开发应用时，默认情况下，开发服务器会运行在端口3000上。但如果这个端口已经被其他服务占用，或者你出于其他原因需要更改端口，可以很容易地将其更改为其他端口。

更改React应用的默认端口可以通过修改启动脚本来实现。这主要是通过设置环境变量PORT来完成的。这里有几种方法来设置这个环境变量：

方法一：直接在命令行中设置

你可以在启动应用时直接在命令行中指定PORT环境变量。例如，如果你使用的是npm作为你的包管理器，你可以这样做：

bash
PORT=5000 npm start

这条命令会将React应用的端口设置为5000。如果你使用的是Yarn，相应的命令将是：

bash
PORT=5000 yarn start

方法二：修改package.json

另一个常见的方法是在package.json中修改scripts段。这样每次启动时都会自动使用新的端口，而无需每次都手动设置。你可以这样修改：

json
{
  "scripts": {
    "start": "PORT=5000 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

这里，我们修改了start脚本，将PORT环境变量设置为5000。

方法三：使用.env文件

对于更持久的环境变量设置，可以使用.env文件。创建一个名为.env的文件在项目根目录中，并添加以下内容：

shell
PORT=5000

这样，每次启动项目时，create-react-app都会自动读取.env文件中的设置。

示例用例

假设你正在开发一个项目，其中包含了一个后端API和一个前端React应用。后端API占用了端口3000，因此你需要将React应用的端口更改为5000。使用上述任何一种方法更改端口后，你就可以同时运行这两个服务，而不会发生端口冲突。

总的来说，更改端口是一个简单的过程，可以通过多种方式完成，根据你的项目需求和偏好选择最合适的方法。