Vue.js 在本地主机下无法访问 webapp：<port>

Question

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

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

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

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

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

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

Answer 1

刚问完问题，我就为每个遇到类似问题的人找到了一个类似的here。

总而言之，我的解决方案是 将 --host 0.0.0.0 添加到 package.json 中的 npm 运行 serve 命令，以便行看起来像这样：

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

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

我看不出执行此简单修复有任何缺点。如果有，我会很高兴听到更好的解决方案！

Answer 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，您将需要取消注释 2 个底线

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

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

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

127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost

Vue.js webapp not accessible under localhost:<port>