为什么在升级到 webpack 5.x 后执行 `npm run serve` 时出现 `Error: getaddrinfo ENOTFOUND localhost:8081`？答案

【问题标题】：Why am I getting `Error: getaddrinfo ENOTFOUND localhost:8081` when executing `npm run serve` after upgrading to webpack 5.x?为什么在升级到 webpack 5.x 后执行 `npm run serve` 时出现 `Error: getaddrinfo ENOTFOUND localhost:8081`？
【发布时间】：2023-02-22 04:38:39
【问题描述】：

我不得不将一个依赖 webpack 4.x 的 Vue 项目升级到 webpack 5.x。在这样做之前，我的vue.config.js 中有以下内容：

devServer: {
  port: 8081,
  public: process.env.PUBLIC_ADDRESS,
},

PUBLIC_ADDRESS 是在 .env.development 文件中定义的，如下所示：

PUBLIC_ADDRESS=localhost:8081

升级到 webpack 5.x 后，public 不再受支持，所以我改为主机如下：

devServer: {
  port: 8081,
  host: process.env.PUBLIC_ADDRESS,
},

但这不起作用。相反，我收到错误：

C:\repos\miqa\web_client\node_modules\webpack-dev-server\lib\Server.js:2472
        throw error;
        ^

Error: getaddrinfo ENOTFOUND localhost:8081
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:107:26) {
  errno: -3008,
  code: 'ENOTFOUND',
  syscall: 'getaddrinfo',
  hostname: 'localhost:8081'
}

为什么是这样？

【问题讨论】：

标签： javascript node.js vue.js webpack

【解决方案1】：

我分享这个是因为我花了很长时间才意识到这是问题所在，我希望能为其他人节省一些时间。

您实际上只想将主机名发布到host - 换句话说，不包括:8081。在我的例子中，这意味着从以下位置编辑我的.env.development 文件：

PUBLIC_ADDRESS=localhost:8081

到：

PUBLIC_ADDRESS=localhost

如果您不使用环境变量来存储主机名，您的最终代码可能如下所示：

devServer: {
  port: 8081,
  host: localhost,
},

代替：

devServer: {
  port: 8081,
  host: localhost:8081,
}

如此简单，如此容易被忽视。

【讨论】：