react 项目修改启动端口修改 react 项目启动端口 react 项目修改启动端口的时候，很多博客上写的是：修

react 项目修改启动端口的时候，很多博客上写的是：修改package.json文件中的启动指令

"scripts": {
    "start": "react-scripts start",
    .....
  }

为：

"scripts": {
    "start": "set PORT=新端口 && react-scripts start",
    .....
  }

。

如果不管用的话，可以按照我下面这个办法再试一下，

npm run start 或 npm start 指令，执行的是 node_modules ---> react-scripts ---> scripts ---> start.js 文件
在该文件中，我们会找到默认3000的端口(大概在55行左右)

// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';

从此我们能看出，其实 react项目启动的时候，端口号其实是从 process.env.PORT 中进行获取的，如果获取不到，才会采用 3000 3. 因此，我们就可以在项目中创建 .env 文件，来手动添加 PORT=新端口号该环境变量

在 react项目的.env 文件中，增加环境变量的时候，如果环境变量前面有 REACT_APP_ 前缀，则该环境变量，可在项目组件通过 process.env.REACT_APP_XXX 获取到

假设：在 react项目的.env 文件中，有如下两个环境变量：

XiaoHong=http://www.xiaohong.com
REACT_APP_XiaoMing=http://www.xiaoming.com

则 REACT_APP_XiaoMing 可以在项目中通过 process.env.REACT_APP_XiaoMing访问到, XiaoHong则访问不到

react 项目修改启动端口