编程知识 cdmana.com

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

解决

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

设置环境变量,较为方便的是直接修改packcage.jsonscripts中的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向程序传入端口号这个参数。

版权声明
本文为[锦天]所创,转载请带上原文链接,感谢
https://wuyujin.blog.csdn.net/article/details/107985218

Scroll to Top