Vue CLI & Webpack：无法让 webpack-dev-server 运行答案

【问题标题】：Vue CLI & Webpack: can't get webpack-dev-server to runVue CLI & Webpack：无法让 webpack-dev-server 运行
【发布时间】：2018-11-26 19:13:04
【问题描述】：

我正在使用vue init webpack project-name 生成一个 webpack 开发服务器。生成服务器后，运行npm run dev会产生以下错误：

> client@1.0.0 dev /home/localhost/dev/vuetest/client
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 10% building modules 1/3 modules 2 active .../client/index.js?http://localhost:8080events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: getaddrinfo ENOTFOUND localhost
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:50:26)
Emitted 'error' event at:
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1498:12)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:50:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the client@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/localhost/.npm/_logs/2018-06-17T22_25_08_212Z-debug.log

这是来自 package.json 的开发脚本，由 vue 自动生成

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

这是我正在使用的 node 和 vue-cli 的版本：

$ node -v
v10.4.0
$ vue -V
3.0.0-rc.2

到目前为止我尝试过的事情：

将 webpack-dev-server 和 webpack 本身回滚到之前的版本
检查我的所有端口；我绝对没有在 :8080 上运行任何东西，而且 webpack 应该会自动寻找一个新端口。之前对该问题的回答普遍认为这是一个端口冲突问题，但这里并非如此。
重新安装 vue-cli

有趣的是，我在 Windows 10 和 openSUSE Tumbleweed（当前机器）上都遇到了这个错误，但是当我在 Ubuntu VM 上生成相同的 vue 项目时，它运行良好。

编辑：

问题是由于 webpack.dev.conf.js 试图使用我的 linux hostname 而不是默认的“localhost”。改变这一行：

host: HOST || config.dev.host,

到这里：

host: "localhost",

解决了这个问题。

【问题讨论】：

会不会是localhost 未在您的主机文件中以某种方式定义？
如果是这样，可能与stackoverflow.com/questions/35757799/…重复
我不这么认为——我还应该提到 vue-cli 与 browserify 完美配合。据我所知，它与 webpack 特别相关。编辑：刚刚从这个链接尝试了推荐的解决方案，没有任何改变。
如果你在 cmd 或终端运行ping localhost 会发生什么？
你刚刚帮我弄明白了！！它实际上并没有尝试将其托管在本地主机上；它试图在我的 hostname 在 openSUSE 中托管它。在我的 OP 中，我用“localhost”审查了我的主机名，认为主机名变量和 localhost 地址是同义词。我将 webpack 开发配置中的主机更改为“localhost”，它修复了所有问题。

标签： node.js linux webpack vue.js opensuse

【解决方案1】：

尝试用这个创建项目。您使用的是版本 3 rc.2，而 init 命令属于版本 2。

vue create project-name

文档： https://cli.vuejs.org/guide/creating-a-project.html#using-the-gui

【讨论】：

【解决方案2】：

这个问题有两种解决方案：

正如@atilkan 指出的那样，vue init project-name 命令在 Vue CLI 3 中已被弃用。使用vue create project-name，我已经能够成功生成并运行开发服务器。你可以阅读更多关于 Vue CLI 3 的新项目创建语法here。

此外，最初由已弃用的 vue init 命令创建的项目未能为自己分配正确的主机名。问题是由于 webpack.dev.conf.js 试图使用我的 linux 主机名而不是默认的“localhost”。改变这一行：

host: HOST || config.dev.host,

到这里：

host: "localhost",

解决了这个问题。 Error: getaddrinfo ENOTFOUND yourHostName 错误可以通过这样做来修复，尽管这可能不是最好的方法。

【讨论】：