create-react-app 工程，如何修改默认端口号?

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

create-react-app生成的项目，默认端口号是3000。但是，总是有人蠢蠢欲动，想要修改这个3000端口。本文中的主要内容，就是使用各种方案修改这个3000端口，总有一款适合您。

技术背景提示：3000端口是webpack配置里面写的，可以通过传递一个PORT全局变量，来修改这个端口。当然，您还可以在node_modules/react-scripts/目录下面，批量搜索替换3000字样，这个操作比较暴力。

本文测试环境：mac/win/create-react-app@2.1.2。

推荐方案

这里就先公布一下最优方案吧：先安装cross-env插件，然后通过修改package.json中的命令行，传递进来新的PORT环境变量。本方案最完美，其余方案都是补充的逗逼方案。

全局安装cross-env：

npm install cross-env -g

修改package.json:

"scripts": {
    "start": "cross-env PORT=5000 react-scripts start",
    //...
}

使用方式如上述所示，cross-env PORT=<port>，注意：这后面并没有使用&&字样。

补充方案一

如果不使用cross-env，那么不同平台下，启动代码也就不同了。比如：

win环境：

set PORT=5000 && react-scripts start

mac环境：

PORT=5000 react-scripts start

或者

export PORT=5000 && react-scripts start

关于命令行里面的环境变量设置，下面的链接中，有个更详细的例子：

• https://newsn.net/say/php-putenv-getenv.html

补充方案二

修改scripts/start.js中的3000端口字样，这个方案破坏性比较大。不建议使用。

• 如果没有eject，那么位置是：node_modules/react-scripts/scripts/start.js。
• 如果已经eject，那么位置是：scripts/start.js。

关于eject操作，这里有更详细的描述信息：

• https://newsn.net/say/create-react-app-eject.html

总结

原理上来说，就是定义个全局变量PORT，而手法上就有很多种了，选择一种适合你的就可以了！

更多react相关经验文字，请点击苏南大叔的博客文章。

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。