微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

无法在localhost上访问Vue.js Web应用程序:<端口>

如何解决无法在localhost上访问Vue.js Web应用程序:<端口>

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

现在我在另一台PC上工作,并且该项目到目前为止运行正常,问题是,如果我在浏览器中输入localhost或127.0.0.1的网址,则会得到“无法连接错误

如果我在URL中使用PC ip或它的主机名,我可以照常访问该页面。 我想知道可能是什么问题。我对网络了解不多,但是由于以前PC可能没有设置主机名,所以我认为这可能是个问题?

通过npm run serve启动项目时,我得到输出

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

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

解决方法

我倾向于看到您的PC上存在本地DNS服务器设置问题。

  • Windows

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

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

如果未将localhost绑定在 Windows

上,则需要取消注释2个底行。
  • Unix(Linux / macOS)

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

您应该获得类似于以下内容的信息。如果没有,请这样。

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

127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost
,

问了这个问题之后,我发现每个遇到类似问题的人都有一个类似的here

为我总结解决方案的方法是在package.json中的npm run serve命令中添加--host 0.0.0.0 ,使该行如下所示:

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

此后,运行命令时,输出将更改回显示localhost,我可以通过localhost:<portnr>再次访问该页面。

在执行此简单修复程序时,我看不到任何不利之处。如果有,我将很高兴听到更好的解决方案!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。