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

IT技术 reactjs npm create-react-app react-server
2021-04-05 00:00:38

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

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

6个回答

如果你不想设置环境变量，另一种选择是修改scriptspackage.json的部分：

"start": "react-scripts start"

到

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

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

或者（可能是）@IsaacPak 提供的更通用的解决方案

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

Windows @JacobEnsor 解决方案

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

cross-env lib无处不在。有关详细信息，请参阅 Aguinaldo Possatto 的回答

由于我的答案的流行而更新：目前我更喜欢使用保存在.env文件中的环境变量（用于以deploy方便和可读的形式存储不同配置的变量集）。不要忘记添加*.env到.gitignore如果你还在存储你的秘密.env文件。这里解释了为什么在大多数情况下使用环境变量更好。这是为什么在环境中存储秘密是个坏主意的解释。

对于 ubuntu："start": "export PORT=3006 react-scripts start"为我工作
2021-06-08 00:00:38
"start": "export PORT=3001 && react-scripts start" 这个在 Ubuntu 16 中对我有用
2021-06-12 00:00:38
您也可以安装该cross-env软件包并执行"start": "cross-env PORT=3006 react-scripts start". 这将适用于所有环境。
2021-06-12 00:00:38
@ElRuso 如果该项目仅用于特定环境，我同意，这是矫枉过正。类似的用例cross-env是当您有多个开发人员在不同的系统上工作时。也许有些人更喜欢 MAC，有些人更喜欢 Windows。或者，另一种情况，所有开发人员都使用 Windows，但您想添加一个环境变量，该变量将在运行 Ubuntu 的 CI/CD 服务器上运行。我希望这有帮助。
2021-06-16 00:00:38
对于 Windows： "start": "set PORT=3005 && react-scripts start"
2021-06-17 00:00:38

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

.env在您的项目根目录创建一个文件并在那里指定端口号。喜欢：

PORT=3005
@carkod其实，他们说把敏感数据在文件中其他的比.env。在他们的情况下，他们建议使用.env.local您不应签入源代码管理的哪个，以便您可以安全地签.env入源代码管理。所以同样的建议仍然适用。
2021-05-22 00:00:38
这适用于具有相同 package.json 文件的 MacOSX 和 Windows。
2021-05-23 00:00:38
这是 create-react-app README.md 中描述的方法
2021-05-30 00:00:38
我更喜欢这个答案，因为它利用了可用的配置选项，而其他解决方案更像是技巧/技巧。
2021-06-07 00:00:38
create-react-app 支持开箱即用地使用 .env 文件。如果您将敏感信息放入其中，请确保不要将 .env 签入源代码管理。
2021-06-18 00:00:38

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

例如：

.env

PORT=4200

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

您可以使用cross-env来设置端口，它适用于 Windows、Linux 和 Mac。

yarn add -D cross-env

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

"start": "cross-env PORT=3006 react-scripts start",
这正是我所需要的。可以在大多数常见平台上运行良好的东西，例如我的家庭设置是 Windows，工作是 Mac。
2021-05-26 00:00:38

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

$ export PORT=3005 #Linux
$ $env:PORT=3005 # Windows - Powershell
我将运行两个 react 应用程序，一个必须在 3005 端口上，另一个应该在 3006 端口上
2021-05-26 00:00:38
@lem 您可以打开两个控制台，在每个控制台中将环境变量设置为 3005 和 3006 并运行应用程序。
2021-06-01 00:00:38
@legnoban 在 2 个命令之间添加一个 && 。 "start": "set PORT=3005 && react-scripts start"
2021-06-18 00:00:38
"start": "set PORT=3005 react-scripts start" 只设置端口但不运行应用程序
2021-06-21 00:00:38
其它你可能感兴趣的问题
上一篇使用钩子时 React 批处理状态更新功能吗？ 下一篇ReactJS 给出错误 Uncaught TypeError: Super expression must be null or a function, not undefined