本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规。大家都是程序员,不要闹得不开心。

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

苏南大叔:create-react-app 工程,如何修改默认端口号? - react-port-hero
create-react-app 工程,如何修改默认端口号?(图5-1)

技术背景提示: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",
    //...
}

苏南大叔:create-react-app 工程,如何修改默认端口号? - cross-env-port-win
create-react-app 工程,如何修改默认端口号?(图5-2)

苏南大叔:create-react-app 工程,如何修改默认端口号? - cross-env-port-mac
create-react-app 工程,如何修改默认端口号?(图5-3)

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

补充方案一

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

win环境:

set PORT=5000 && react-scripts start

苏南大叔:create-react-app 工程,如何修改默认端口号? - win-set-port
create-react-app 工程,如何修改默认端口号?(图5-4)

mac环境:

PORT=5000 react-scripts start

或者

export PORT=5000 && react-scripts start

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

补充方案二

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

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

苏南大叔:create-react-app 工程,如何修改默认端口号? - scripts-start
create-react-app 工程,如何修改默认端口号?(图5-5)

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

总结

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

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

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