217

我是整个nodejs / reactjs世界的新手，如果我的问题听起来很愚蠢，我深表歉意。所以我在玩reactabular.js。

每当我这样做时，npm start它总是在运行localhost:8080。

如何将其更改为运行0.0.0.0:8080以使其可公开访问？我一直在尝试阅读上述 repo 中的源代码，但未能找到执行此设置的文件。

80另外，补充一点 -如果可能的话，我如何让它在端口上运行？

4

12 回答 12

277

像这样的东西对我有用。我猜这应该对你有用。

使用这个运行 webpack-dev

webpack-dev-server --host 0.0.0.0 --port 80

并在 webpack.config.js 中设置

entry: [
    'webpack-dev-server/client?http://0.0.0.0:80',
     config.paths.demo
 ]

注意如果您使用的是热加载，则必须这样做。

使用这个运行 webpack-dev

webpack-dev-server --host 0.0.0.0 --port 80

并在 webpack.config.js 中设置

entry: [
    'webpack-dev-server/client?http://0.0.0.0:80',
    'webpack/hot/only-dev-server',
     config.paths.demo
 ],

....
plugins:[new webpack.HotModuleReplacementPlugin()]
于 2015-10-22T04:34:47.320 回答
145

我就是这样做的，它似乎工作得很好。

在您的 webpack.config.js 文件中添加以下内容：

devServer: {
    inline:true,
    port: 8008
  },

显然，您可以使用任何不与另一个端口冲突的端口。我提到冲突问题只是因为我花了大约 4 个小时。解决一个问题只是发现我的服务在同一个端口上运行。

于 2016-04-17T17:26:17.390 回答
82

配置 webpack（在 webpack.config.js 中）：

devServer: {
  // ...
  host: '0.0.0.0',
  port: 80,
  // ...
}
于 2016-05-17T12:52:32.827 回答
31

我是 JavaScript 开发和 ReactJS 的新手。在通过查看 react-scripts 代码找出答案之前，我无法找到适合我的答案。使用 ReactJS 15.4.1+ 和 react-scripts，您可以使用环境变量从自定义主机和/或端口开始：

HOST='0.0.0.0' PORT=8080 npm start

希望这对像我这样的新手有所帮助。

于 2017-01-21T02:58:07.163 回答
21

以下为我工作 -

1）Package.json添加这个：

"scripts": {
    "dev": "webpack-dev-server --progress --colors"
}

2）在webpack.config.js您导出的配置对象下添加：

devServer: {
    host: "GACDTL001SS369k", // Your Computer Name
    port: 8080
}

3) 现在在终端类型上：npm run dev

4）在#3编译并准备好之后，只需转到您的浏览器并输入地址为http://GACDTL001SS369k:8080/

希望您的应用程序现在可以使用其他人可以在同一网络上访问的外部 URL。

PS：GACDTL001SS369k是我的计算机名称，所以请用您机器上的任何名称替换。

于 2017-02-20T04:21:22.750 回答
6

我在其他一些答案中挣扎。（我的设置是：在 Windows 下使用 Ubuntu 18.04 virtualbox 创建项目后，我正在npm run dev使用 webpack 3.12.0运行vue init webpack。我已将 vagrant 配置为将端口 3000 转发到主机。）

  • 不幸的是，putnpm run dev --host 0.0.0.0 --port 3000不起作用——它仍然在 localhost:8080 上运行。
  • 此外，该文件webpack.config.js不存在，创建它也无济于事。
  • 然后我发现配置文件现在位于build/webpack.dev.conf.js（build/webpack.base.conf.js和build/webpack.prod.conf.js）中。但是，修改这些文件看起来不是一个好主意，因为它们实际上是从process.env.

所以我搜索了如何设置 process.env 变量并通过运行命令取得成功：

HOST=0.0.0.0 PORT=3000 npm run dev

这样做之后，我终于得到“你的应用程序在这里运行：http: //0.0.0.0 :3000 ”，我终于可以通过localhost:3000从主机浏览来看到它。

编辑：找到另一种方法是通过编辑开发主机和端口config/index.js。

于 2018-12-15T09:28:30.430 回答
5

如果您在使用“create-react-app”创建的 React 应用程序中，请转到您的package.json并更改

"start": "react-scripts start",

到...（unix）

"start": "PORT=80 react-scripts start",

或...（赢）

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

于 2017-08-07T18:42:34.253 回答
3

以下在 JSON 配置文件中为我工作：

"scripts": {
  "start": "webpack-dev-server --host 127.0.0.1 --port 80 ./js/index.js"
},
于 2017-07-23T07:31:42.913 回答
2

对我来说：更改监听主机有效：

.listen(3000, 'localhost', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:3000');
    });

改为：

.listen(3000, '0.0.0.0', function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at localhost:3000');
    });

并且服务器开始监听 0.0.0.0

于 2019-03-29T12:46:54.330 回答
0

我尝试了上述解决方案，但没有运气。我在项目的 package.json 中注意到了这一行：

 "bin": {
"webpack-dev-server": "bin/webpack-dev-server.js"

},

我看了看，bin/webpack-dev-server.js发现这条线：

.describe("port", "The port").default("port", 8080)

我将端口更改为 3000。有点蛮力的方法，但它对我有用。

于 2018-03-19T17:07:32.333 回答
0

对我来说，这段代码有效。只需将其添加到您的package.json文件中：

"scripts": {
    "dev-server": "encore dev-server",
    "dev": "webpack-dev-server --progress --colors",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
},

并通过运行运行脚本“build”npm run build

于 2020-06-16T18:25:13.527 回答
-1

我试过这个很容易使用另一个端口：

PORT=80 npm run dev
于 2019-05-31T11:29:17.433 回答