React如何修改端口

在使用React开发项目时，默认情况下，React应用会在localhost:3000端口上运行。然而，在某些情况下，我们可能需要修改这个默认端口，例如当端口3000被其他应用程序占用时，或者我们需要在同一台机器上运行多个React应用时。本文将介绍如何在React项目中修改默认端口。

1. 使用环境变量修改端口

React项目通常使用create-react-app脚手架创建，而create-react-app提供了一个简单的方式来修改端口，即通过设置环境变量PORT。

步骤：

1. 打开项目根目录下的package.json文件。
2. 在scripts部分，找到start脚本。
3. 修改start脚本，添加PORT环境变量。例如，如果你希望将端口修改为4000，可以将start脚本修改为：

   "scripts": {
     "start": "set PORT=4000 && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   }

在Windows系统中，使用set PORT=4000；在macOS或Linux系统中，使用PORT=4000。

1. 保存文件后，重新启动开发服务器：

   npm start

此时，React应用将在localhost:4000上运行。

2. 使用.env文件修改端口

除了在package.json中设置环境变量外，我们还可以通过创建.env文件来设置端口。

步骤：

1. 在项目根目录下创建一个名为.env的文件。
2. 在.env文件中添加以下内容：

   PORT=4000

1. 保存文件后，重新启动开发服务器：

   npm start

此时，React应用将在localhost:4000上运行。

3. 使用react-scripts配置修改端口

如果你不想使用环境变量，还可以通过修改react-scripts的配置文件来更改端口。

步骤：

1. 在项目根目录下创建一个名为config的文件夹。
2. 在config文件夹中创建一个名为webpackDevServer.config.js的文件。
3. 在webpackDevServer.config.js文件中添加以下内容：

   module.exports = {
     port: 4000,
   };

1. 保存文件后，重新启动开发服务器：

   npm start

此时，React应用将在localhost:4000上运行。

4. 使用npm或yarn命令行参数修改端口

如果你不想修改项目文件，还可以在启动开发服务器时通过命令行参数指定端口。

步骤：

1. 打开终端，进入项目根目录。
2. 使用以下命令启动开发服务器并指定端口：

   npm start -- --port 4000

或者使用yarn：

   yarn start --port 4000

此时，React应用将在localhost:4000上运行。

总结

通过以上几种方法，我们可以轻松地修改React应用的默认端口。无论是通过环境变量、.env文件、react-scripts配置，还是命令行参数，都可以实现端口修改。选择哪种方法取决于你的具体需求和项目配置。希望本文能帮助你更好地管理和配置React应用的开发环境。