升级Webpack 5.x后执行npm run serve出现getaddrinfo ENOTFOUND错误

错误原因 #

你把带端口号的localhost:8081赋值给了host配置项，但Webpack Dev Server的host字段只接受纯主机名/IP地址，不能包含端口号。当Dev Server尝试解析localhost:8081作为主机名时，DNS无法找到对应的地址，因此抛出getaddrinfo ENOTFOUND错误。

Webpack 4中的public配置用于指定外部可访问的完整地址（主机+端口），而Webpack 5里的host仅负责设置服务器绑定的主机名，端口需要通过单独的port字段配置，两者不能混在一起。

修复方案 #

有两种简单的修复方式：

方式一：修改环境变量

直接修改.env.development文件，去掉端口号：

PUBLIC_ADDRESS=localhost

此时vue.config.js中的配置保持不变即可：

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

方式二：拆分变量（保留原环境变量格式）

如果不想修改环境变量，可以在代码中拆分字符串，提取主机名部分：

devServer: {
  port: 8081,
  host: process.env.PUBLIC_ADDRESS.split(':')[0],
},

这种方式会自动把localhost:8081拆分成localhost作为主机名，端口仍使用配置里的8081。

内容的提问来源于stack exchange，提问作者Dave Mackey