如何使webpack开发服务器在端口80和0.0.0.0上运行以使其可公开访问?

node.js Node.js

神奇Mandy

2020-03-11

我是整个nodejs / reactjs领域的新手,如果我的问题听起来很傻,我表歉意。所以我在玩reactabular.js

每当我执行此操作时,npm start它就会一直运行localhost:8080

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

另外,要补充一点- 80如果可能的话,如何使它在端口上运行

第612篇《如何使webpack开发服务器在端口80和0.0.0.0上运行以使其可公开访问?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
GilTony 2020.03.11

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

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

},

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

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

我将端口更改为3000。虽然有点蛮力,但是对我有用。

Itachi猪猪Green 2020.03.11

我试图这样做以轻松使用另一个端口:

PORT=80 npm run dev
梅小卤蛋梅 2020.03.11

我在其他一些答案中苦苦挣扎。(我的设置是:在Windows下的Ubuntu 18.04 virtualbox上npm run dev创建我的项目后,我正在使用webpack 3.12.0 运行vue init webpack。我已将vagrant配置为将端口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.jsbuild/webpack.prod.conf.js)中。但是,修改这些文件似乎不是一个好主意,因为它们实际上是从读取HOST和PORT的process.env

因此,我搜索了如何设置process.env变量并通过运行以下命令获得成功:

HOST=0.0.0.0 PORT=3000 npm run dev

完成此操作后,我最终得到“您的应用程序正在这里运行:http: //0.0.0.0 : 3000 ”,并且最终可以通过localhost:3000从主机浏览到来看到它

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

猿村村 2020.03.11

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

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

以下为我工作-

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,其他人可以在同一网络上访问该URL。

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

米亚乐 2020.03.11

这就是我的操作方式,它似乎运行得很好。

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

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android