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

解决

很简单，可以在启动前设置环境变量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目录中找到对应的下载目录。

可见：在当前项目的./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向程序传入端口号这个参数。