我的项目是基于创建-反应-应用程序。NPM启动或yarn启动默认将在端口3000上运行应用程序,在package.json中没有指定端口的选项。

在这种情况下,如何指定自己选择的端口?我想同时运行这个项目的两个(用于测试),一个在端口3005,另一个是3006


当前回答

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

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

然后再次运行NPM start。

其他回答

你可以在package.json中修改你的脚本:

- MacOs:

"scripts": {
     "start": "PORT=9002 react-scripts start",
     "build": "react-scripts build",
     ...     
}

在窗户

  "scripts": {
      "start": "set PORT=9002 && react-scripts start",
      "build": "react-scripts build",
      ...
}

如果你已经做了npm run eject,去scripts/start.js并在const DEFAULT_PORT = parseInt(process.env. js)中更改port。端口,10)|| 3000;(在本例中为3000)到您想要的任何端口。

对于我的windows朋友们,我发现了一种改变ReactJS端口的方法,可以在任何你想要的端口上运行。在运行服务器之前,请转到

 node_modules/react-scripts/scripts/start.js

在其中,搜索下面的行并将端口号更改为所需的端口

 var DEFAULT_PORT = process.env.PORT || *4000*;

这样就可以开始了。

如果不想设置环境变量,另一个选项是修改包的脚本部分。json:

"start": "react-scripts start"

to

Linux(在Ubuntu 14.04/16.04上测试)和MacOS(在MacOS Sierra 10.12.4上由aswin-s测试):

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

或者(可能)IsaacPak的更通用的解决方案

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

Windows JacobEnsor的解决方案

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

跨环境图书馆在任何地方都有效。详见Aguinaldo Possatto的回答

更新是因为我的回答很受欢迎:目前我更喜欢使用保存在.env文件中的环境变量(以方便和可读的形式存储不同部署配置的变量集很有用)。别忘了加上*。如果你仍然将秘密存储在。Env文件中,Env转换为。gitignore。下面是为什么在大多数情况下使用环境变量更好的解释。以下是为什么在环境中存储秘密是一个坏主意的解释。

对于windows操作系统,可直接在cmd命令下执行此命令

set PORT=3001 && npm start