如何设置 React 自定义端口，如 3129

Posted 2023-02-21

【中文标题】如何设置 React 自定义端口，如 3129

【英文标题】：How to set React Custom Port like 3129

【发布时间】：2018-12-21 10:07:20

【问题描述】：

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

【问题讨论】：

什么操作系统？您必须设置 PORT 环境变量。

github.com/facebook/create-react-app/issues/242

How to specify a port to run a create-react-app based project?的可能重复

【参考方案1】：

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

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

然后再次运行npm start 这会将应用程序的默认端口设置为您指定的端口

或者： 修改 package.json 的一部分：

"start": "react-scripts start"

对于 Linux 和 MacOS：

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

Windows 到：

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

【参考方案2】：

通过create react app，你可以在根目录下创建一个名为.env的文件，并在里面放入如下代码：

端口=3129

【参考方案3】：

在源文件夹中添加 .env 文件并添加如下条目

PORT=9001

【参考方案4】：

运行这段代码

yarn start --port 30022