在 localhost:<port> 下无法访问 Vue.js webapp答案

【问题标题】：Vue.js webapp not accessible under localhost:<port>在 localhost:<port> 下无法访问 Vue.js webapp
【发布时间】：2021-01-20 04:18:03
【问题描述】：

所以我有一个我在一台 PC 上开发的 Vue.js 网络应用程序，我可以随时通过localhost:<portnr>、127.0.0.1:<portnr> 或<ip>:<portnr> 访问它。

现在我在另一台 PC 上工作，项目到目前为止运行良好，问题是如果我在浏览器中输入带有 localhost 或 127.0.0.1 的 url，我会得到 “无法连接错误” 。

如果我在 url 中使用 PC ip 或其主机名，我可以正常访问该页面。我想知道问题可能是什么。我对网络不太了解，但由于之前的 PC 可能没有设置主机名，我想这可能是个问题？

当通过npm run serve 启动项目时，我得到了输出

App running at:
  - Local:   http://<host_name>:5050/ 
  - Network: http://<ip>:5050/

在另一台电脑上，它用于打印 localhost 而不是 url 上的主机名以进行本地访问。 感谢您提供有关如何解决此问题的任何提示！

【问题讨论】：

【解决方案1】：

在提出问题后，我为每个有类似问题的人找到了一个类似的here。

总结一下我的解决方案是将 --host 0.0.0.0 添加到 package.json 中的 npm run serve 命令，以便该行如下所示：

"scripts": {
    "serve": "vue-cli-service serve --host 0.0.0.0",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

在此之后，运行命令时的输出变回显示本地主机，我可以通过localhost:<portnr>再次访问该页面。

我看不出做这个简单的修复有什么缺点。如果有，我会很高兴听到更好的解决方案！

【讨论】：

【解决方案2】：

我倾向于看到你在电脑上存在本地 DNS 服务器设置问题。

使用notepad 或其他编辑器以administrator 打开%systemroot%\system32\drivers\etc\hosts 文件。也许文件看起来像这样：

... ... ...
# localhost name resolution is handled within DNS itself.
#       127.0.0.1       localhost
#       ::1             localhost

如果localhost 未绑定在Windows

上，您需要取消注释两条底线

使用nano 或其他拥有sudo 权限的编辑者打开/etc/hosts 文件。

你应该得到类似下面的东西。如果没有，请这样。

##
# Host Database
# ... ... ...

127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost

【讨论】：