如何指定运行基于create-react-app的项目的端口?

reactjs React.js

泡芙Tom

2020-03-11

我的项目基于create-react-appnpm startyarn start默认情况下将在端口3000上运行该应用程序,并且在package.json中没有指定端口的选项。

在这种情况下,如何指定自己选择的端口?我想同时运行此项目的两个(用于测试),一个在端口3005,另一个在3006

第617篇《如何指定运行基于create-react-app的项目的端口?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

12个回答
西门逆天 2020.03.11

在您的中package.json,转到脚本并使用--port 4000set PORT=4000,如以下示例所示:

package.json (视窗):

"scripts": {
    "start": "set PORT=4000 && react-scripts start"
}

package.json (Ubuntu):

"scripts": {
    "start": "export PORT=4000 && react-scripts start"
}
Gil米亚卡卡西 2020.03.11

无需更改应用程序代码或环境文件中的任何内容,如何在调用命令时给出端口号?这样就可以从几个不同的端口运行并提供相同的代码库。

喜欢:

$ export PORT=4000 && npm start

您可以将所需的端口号替换为4000上面的示例值

TonyPro 2020.03.11

能够指定除以外的其他端口3000作为命令行参数或环境变量将是很好的

现在,这个过程非常复杂:

  1. npm run eject
  2. 等待那完成
  3. 编辑scripts/start.js和查找/替换3000您要使用的任何端口
  4. 编辑config/webpack.config.dev.js并执行相同的操作
  5. npm start
罗静云 2020.03.11

您可以在启动应用程序时找到默认端口配置

yourapp / scripts / start.js

向下滚动并将端口更改为所需的端口

const DEFAULT_PORT = parseInt(process.env.PORT,10)|| 4000;

希望这可以对您有所帮助;)

Sam梅 2020.03.11

在Windows中,可以通过两种方法完成。

  1. 在“ \ node_modules \ react-scripts \ scripts \ start.js”下,搜索“ DEFAULT_PORT”并添加所需的端口号。

    例如:const DEFAULT_PORT = parseInt(process.env.PORT,10)|| 9999;

  2. 在package.json中,执行以下行。“ start”:“ set PORT = 9999 && react-scripts start”然后使用NPM start启动应用程序。它将在9999端口启动应用程序。

米亚小小神乐 2020.03.11

总而言之,我们有三种方法可以完成此任务:

  1. 设置一个名为“ PORT”的环境变量
  2. 修改package.json的“脚本”部分下的“开始”键
  3. 创建一个.env文件,并将PORT配置放入其中

最可移植的将是最后一种方法。但是,正如其他发布者所述,请将.env添加到.gitignore中,以免将配置上传到公共源存储库。

更多详细信息:本文

西门逆天 2020.03.11

在我的package.json文件中"start": "export PORT=3001 && react-scripts start"进行更改也对我有用,并且我在macOS 10.13.4上

Near逆天 2020.03.11

在Windows和Linux上均可使用

package.json

"scripts": {
    "start": "set PORT=3006 && PORT=3006 react-scripts start || react-scripts start"
    ...
}

但是您可能更喜欢使用在其中写入PORT = 3006的方式来创建.env

小小猿 2020.03.11

这是完成此任务的另一种方法。

.env在项目根目录下创建一个文件,并在此处指定端口号。喜欢:

PORT=3005
JimLEYHarry 2020.03.11

对于Windows亲朋好友,我发现了一种更改ReactJS端口以在所需端口上运行的方法。在运行服务器之前,请转到

 node_modules/react-scripts/scripts/start.js

在其中搜索下面的行,并将端口号更改为所需的端口

 var DEFAULT_PORT = process.env.PORT || *4000*;

而且你很好。

西门村村古一 2020.03.11

您可以使用cross-env设置端口,并且该端口将在Windows,Linux和Mac上运行。

yarn add -D cross-env

然后在package.json中,开始链接可能是这样的:

"start": "cross-env PORT=3006 react-scripts start",
猴子小小Tony 2020.03.11

您可以指定名为的环境变量,以PORT指定服务器将在其上运行的端口。

$ export PORT=3005 #Linux
$ $env:PORT=3005 # Windows - Powershell

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android