用create-react-app创建的项目，如何修改默认监听的端口号3000

怼烎@ 2022-11-27 05:29 367阅读 0赞

## 解决 ##

很简单，可以在启动前设置环境变量`PORT`，这个应用会在启动时读取环境变量中的参数，如果没有就用默认的3000(端口号)。

设置环境变量，较为方便的是直接修改`packcage.json`中`scripts`中的`start`选项值。  
修改前：`"start": "react-scripts start",`  
修改后：`"start": "set PORT=8080 && react-scripts start",`

另外也可以用常规的环境变量设置方法。

再次启动，应用会使用刚才设置的设置。

## 原理 ##

使用`create-react-app`创建项目框架后，`packcage.json`中有以下4条基本命令：

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

当安装好依赖`npm install`后，执行`npm run <script_name>`，就会调用该脚本对应的执行命令。  
如：`npm run build`会在`scripts`中寻找脚本名`build`，其对应的命令为`react-scripts build`，那就执行。  
`react-scripts`其实是本项目已安装的一个依赖。可以在`node_modules`目录中找到对应的下载目录。  
![在这里插入图片描述][20200813225541974.png_pic_center]  
可见：在当前项目的`./node_modules/react_scripts/scripts/`目录下有几个脚本文件。  
而我们在`package.json`中配置的脚本命令分别对应执行这里的几个脚本文件。

`./node_modules/react_scripts/scripts/start.js`中有以下两行代码：

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
    const HOST = process.env.HOST || '0.0.0.0';

要么直接修改**本地已下载依赖**中默认配置，如端口号3000(极不推荐)。  
要么，通过环境变量`PORT`向程序传入端口号这个参数。

[20200813225541974.png_pic_center]: /images/20221124/c1571094a02148eaa0ca477973a17386.png