如何将反应中的默认端口从 3000 更改为另一个端口？

Posted 2023-02-21

【中文标题】如何将反应中的默认端口从 3000 更改为另一个端口？

【英文标题】：How can I change the default port in react from 3000 to another port?

【发布时间】：2020-05-31 09:56:17

【问题描述】：

如何将 react 默认端口 3000 更改为其他端口？

默认情况下，ReactJS 应用程序在端口 3000 上运行。Express.js 应用程序也在同一个端口 3000 上运行。如果您要同时运行这两个应用程序，则会出现冲突。您需要更改其中之一的端口。 在 ReactJS 中，更改端口号的最简单方法是通过终端将名为 PORT 的环境变量设置为所需的数字。例如，这里我们将端口号更改为 5000。

如果你在 Linux 和 Mac 终端中使用，那就是

$export PORT=5000

或者如果你在 Windows 中使用，命令会略有不同

$env:PORT=5000

最后启动 npm

npm start

注意：它适用于 .env 文件

如果你想修改你的 package.json 默认是

"scripts": 
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"

并由

修改

  "start": "PORT=2000 react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"

最后再次运行

我用这个

修改你的 package.json Linux 和 MacOS：

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

或

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

或视窗

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

最后重启 npm

我尝试通过使用这个来更改默认端口并成功，所以你可以尝试

如果有更好的解决方案请帮帮我

【参考方案1】：

更好的方法是将.env 文件添加到您的根文件夹。在里面写：

PORT=<YOUR_PORT>.

这种方式更好，因为您不必考虑所有操作系统。由于create-react-app 的工作方式，它只适用于所有人。

【参考方案2】：

作为替代方案，您可以定义一个 "dev" 选项来启动您的服务器，该服务器将 "concurrently" 处理您的 react.js 进程和 node.js 服务器

通过这样做，您将不会为定义 env 变量而烦恼。

这里是后端包 json 文件，脚本部分。然后，只需在命令行输入：npm run dev：

  "scripts": 
    "server": "node server.js",
    "client": "npm run start --prefix ./frontend",
    "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\""
  ,

frontend 文件夹包含 react 项目，它与 package.json 处于同一级别，这就是为什么它是 ./