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

Question

如何将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"

或Windows

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

最后重启npm

我尝试使用this和success更改默认端口，因此您可以尝试

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

Answer 1

更好的方法是在根文件夹中添加一个.env文件。在其中，只需写下：

PORT=<YOUR_PORT>。

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

Answer 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处于同一级别，这就是它是./的原因