如何使用create-react-app命令改变React的默认端口？

如果你用create-react-app命令创建一个应用程序，React在3000个默认端口进行监听。

该项目包含package.json，其中包含启动和运行应用程序的脚本。

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

有时，我们需要改变端口到新的数字，即介于0到2的16次方-1未分配的整数。

这篇短文介绍了如何在react应用中改变默认端口。

我们有多种方法可以改变react应用程序的默认端口

环境变量

环境变量是针对运行中的机器操作系统的。你必须把端口环境变量改成新的数字。

例如，在windows系统中，可以改变启动脚本，如下所示

"scripts": {
        "start": "set port=4000 && react-scripts start",
    }

这样你就可以在环境中设置端口=4000

在Linux/Ubuntu/Mac系统中

"scripts": {
        "start": "export port=4000 && react-scripts start",
    }

cross-env npm库来改变端口

首先，使用npm命令安装cross-env，这只需要在开发中依赖。

这适用于所有的操作系统，如windows、Linux和Mac机器。

npm install --save-dev cross-env

安装完毕后，请按以下方式修改package.json

"scripts": {
        "start": "cross-env port=4000 && react-scripts start",
    }

暂时用命令行改变默认端口，如下所示

npm run start port=4000

创建一个.env文件

另一个简单的方法是在应用程序的根目录下创建一个.env 文件

在.env文件中添加端口属性的值

.env文件

port=4000

注意，env文件包含环境的特定信息，请将其添加到.gitignore文件中，不要提交到源码库。

总结

在现有的机器上添加环境变量，如端口，是比较好的、干净的方法。你可以通过多种方式来改变 react 应用程序中的默认端口。你可以根据你的需要来选择。