我的项目是基于创建-反应-应用程序。NPM启动或yarn启动默认将在端口3000上运行应用程序,在package.json中没有指定端口的选项。

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


当前回答

你可以使用cross-env来设置端口,它可以在Windows、Linux和Mac上工作。

yarn add -D cross-env

然后是包装。Json的开始链接可以是这样的:

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

其他回答

如果不想设置环境变量,另一个选项是修改包的脚本部分。json:

"start": "react-scripts start"

to

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"

跨环境图书馆在任何地方都有效。详见Aguinaldo Possatto的回答

更新是因为我的回答很受欢迎:目前我更喜欢使用保存在.env文件中的环境变量(以方便和可读的形式存储不同部署配置的变量集很有用)。别忘了加上*。如果你仍然将秘密存储在。Env文件中,Env转换为。gitignore。下面是为什么在大多数情况下使用环境变量更好的解释。以下是为什么在环境中存储秘密是一个坏主意的解释。

编辑webpack.config.js并添加你想要在其上运行的端口。这就是你要找的东西:

’devServer: 港口:3005。 historyApiFallback: true, ),

and

输出:{ publicPath:“http://localhost: 3005 /”, },

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

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

方法1

在项目的根目录下创建.env文件

像这样设置

PORT=3005

方法2

在package.json

set PORT=3006 && react-scripts start

总之,我们有三种方法来实现这一目标:

设置名为“PORT”的环境变量 修改package.json中“scripts”部分的“start”键 创建一个.env文件,并将PORT配置放在其中

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

更多细节:这篇文章