我是nodejs/reactjs世界的新手,所以如果我的问题听起来很傻,我很抱歉。我在摆弄react。js。

每当我做一个npm启动,它总是运行在localhost:8080。

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

此外,要补充的是-我如何使它在端口80上运行,如果这是可能的?


这种方法对我很管用。我猜这应该对你有用。

使用此命令运行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()]

我就是这么做的,而且看起来效果不错。

在webpack.config.js文件中添加以下内容:

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

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


配置webpack(在webpack.config.js中):

devServer: {
  // ...
  host: '0.0.0.0',
  port: 80,
  // ...
}

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

HOST='0.0.0.0' PORT=8080 npm start

希望这能帮助到像我这样的新人。


以下对我有用-

1)包装中。Json添加这个:

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

2)在webpack.config.js中,在你导出的config对象下添加:

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

3)现在在终端类型:npm运行dev

4)在#3编译并准备好后,只需前往您的浏览器并输入地址http://GACDTL001SS369k:8080/

您的应用程序现在应该能够使用外部URL工作,其他人可以在同一网络上访问该URL。

PS: GACDTL001SS369k是我的计算机名,所以请替换为您机器上的任何计算机名。


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

"scripts": {
  "start": "webpack-dev-server --host 127.0.0.1 --port 80 ./js/index.js"
},

如果你在用“create-react-app”创建的React应用程序中,请转到你的包中。Json和更改

“start”:“react-scripts start”,

……(unix)

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

或者…(赢)

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


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

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

},

我查看了bin/webpack-dev-server.js,发现了这一行:

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

我把端口改成了3000。有点蛮力的方法,但对我很有效。


其他一些答案让我很纠结。(我的设置是:我在Windows下的Ubuntu 18.04虚拟机上使用vue init webpack创建我的项目后,使用webpack 3.12.0运行npm run dev。我有流浪者配置转发端口3000到主机。)

不幸的是,让npm 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中读取HOST和PORT。

所以我搜索了如何设置进程。Env变量和achieved success by running the command:

HOST=0.0.0.0 PORT=3000 npm run dev

这样做之后,我终于得到“您的应用程序正在这里运行:http://0.0.0.0:3000”,我终于能够通过从主机上浏览localhost:3000看到它。

编辑:另一种方法是在config/index.js中编辑dev主机和端口。


对我来说:改变监听主机有效:

.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


我尝试这样做是为了方便地使用另一个端口:

PORT=80 npm run dev

对我来说,这个代码起作用了。只要把它加在你的包装上。Json文件:

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

然后通过运行npm run build运行脚本“build”


告诉你你正在尝试做的事情的安全影响的b/c,我觉得很脏,但你来吧。

NPM执行dev——-h 0.0.0.0 -p 80


对于windows,创建文件runMobile.bat

set PORT=8081
set HOST=192.168.3.20
npm run dev