Question

我的项目基于create-react-app。默认情况下，npm start或yarn start将在端口3000 上运行应用程序，并且无法在package.json中指定端口。

在这种情况下，如何指定我选择的端口？我想同时运行这个项目中的两个（用于测试），一个在端口3005中，另一个在3006

Answer 1

如果您不想设置environment variable，另一个选项是修改package.json的scripts部分：

"start": "react-scripts start"

到

Linux （在Ubuntu 14.04 / 16.04上测试）和 MacOS （在MacOS Sierra 10.12.4上由@ aswin-s测试）：

"start": "PORT=3006 react-scripts start"

或（可能）@IsaacPak提供更一般的解决方案

"start": "export PORT=3006 react-scripts start"

Windows @JacobEnsor解决方案

"start": "set PORT=3006 && react-scripts start"

由于我的回答非常流行而更新：目前我更喜欢使用保存在.env文件中的环境变量（用于存储不同deploy配置的变量集一种方便易读的形式）。如果您仍然将秘密存储在*.env文件中，请不要忘记将.gitignore添加到.env。 Here解释了为什么在大多数情况下使用环境变量更好。 Here解释了为什么在环境中存储秘密是个坏主意。

Answer 2

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

在项目根目录下创建一个.env文件，并在那里指定端口号。像：

PORT = 3005

Answer 3

在.env以外的主目录中创建一个名称为package.json的文件，并将PORT变量设置为所需的端口号。

例如：

.env

PORT=4200

您可以在以下位置找到此操作的文档：https://create-react-app.dev/docs/advanced-configuration

Answer 4

您可以指定名为DECLARE @Query VARCHAR(100),@Date VARCHAR(100) SELECT @Date = '2016-11-01' SELECT @Query = 'dbo.SP_GetData '''+@Date+'''' INSERT INTO #tmpTable EXEC (@Query)的环境变量，以指定服务器将在其上运行的端口。

PORT

Answer 5

您可以使用cross-env设置端口，它可以在Windows，Linux和Mac上运行。

yarn add -D cross-env

然后在package.json中，start链接可能是这样的：

"start": "cross-env PORT=3006 react-scripts start",

Answer 6

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

package.json（Windows）：

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

package.json（Ubuntu）：

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

Answer 7

对于windows，可以直接在cmd上运行这个命令

set PORT=3001 && npm start

Answer 8

为什么不只是

PORT=3030 npm run start

Answer 9

只需更新webpack.config.js中的一点：

devServer: {
    historyApiFallback: true,
    contentBase: './',
    port: 3000 // <--- Add this line and choose your own port number
}

然后再次运行npm start。

Answer 10

对于我的Windows人员，我发现了一种方法可以将ReactJS端口更改为在您想要的任何端口上运行。在运行服务器之前，请转到

node_modules/react-scripts/scripts/start.js

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

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

你很高兴。

Answer 11

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

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

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

更多详细信息：this article

Answer 12

这在Windows和Linux上均可使用

package.json

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

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

Answer 13

我的package.json文件中更改"start": "export PORT=3001 && react-scripts start"也适用于我，我在macOS 10.13.4

Answer 14

尝试一下：

npm start port=30022

Answer 15

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

yourapp/scripts/start.js

向下滚动并将端口更改为您想要的任何内容

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

希望这可以帮到你;）

Answer 16

只需在命令下运行

PORT=3001 npm start

Answer 17

在Windows中，可以通过两种方式完成。

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

例如：const DEFAULT_PORT = parseInt（process.env.PORT，10）|| 9999;
在package.json中，出现以下行。 “ start”：“设置PORT = 9999 && react-scripts开始” 然后使用NPM start启动应用程序。它将在9999年启动该应用程序端口。

Answer 18

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

喜欢：

$ export PORT=4000 && npm start

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

Answer 19

如果您已经完成'，请转到scripts / start.js并将npm run eject中的端口（在本例中为3000）更改为所需的端口。

Answer 20

这适用于 Linux Elementary OS

"start": "PORT=3500 react-scripts start"

Answer 21

在 Windows 上的 Powershell 中（以管理员身份运行）：

（cd 到您的 CRA 应用根文件夹）

$env:PORT=3002 ; npm 启动

Answer 22

能够指定3000以外的端口，作为命令行参数或环境变量，将会很高兴。

现在，这个过程非常复杂：

运行npm run eject
等待完成
修改scripts/start.js并使用您要使用的任何端口查找/替换3000
修改config/webpack.config.dev.js并执行相同的操作
npm start

如何指定一个端口来运行基于create-react-app的项目？

22 个答案: