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相关经验文字,请点击苏南大叔的博客文章。

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

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   react

本站的忠实读者小伙伴,正在阅读下面这些文章:

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!