从同一网络中的其他设备访问 Vue.js 应用程序(也使用代理) [英] Access Vue.js application from other device in the same network (also using proxy)

问题描述

所以我的问题基本上和 此处，但问题尚未得到解答.

so my problem is basically the same as here, but the question isn't answered yet.

问题是，当我访问 :8080 时，我无法在 webbrowser 中查看我的 vue 应用程序.但是，当使用 npm run serve 启动我的 vue.js 应用程序时，它告诉我，这是除了执行 localhost:8080 之外我还可以访问页面的方式.它可以在我的 PC 上运行，但是当我的手机连接到同一个 wifi 时，我收到无法访问该网址的错误.

The problem ist, that I can't view my vue application in the webbrowser when visiting <pc_ip>:8080. However when starting my vue.js app with npm run serve it tells me, that this is how I could access the page besides doing localhost:8080. It works from my PC but with my phone which is connected to the same wifi I get the error that the url is not reachable.

提前致谢！

更新:因此，在找到其他一些帖子后，我也尝试将一些内容写入 vue.config.js，例如 这里、这里、此处 或 这里 例如

UPDATE: So after finding some other posts I also tried writing some stuff to a vue.config.js like here, here, here or here e.g.

module.exports = {
    devServer: {
      port: 8080,
      host: '0.0.0.0'
    }
  }

但是问题依然存在.我也尝试用我的实际 ip 替换该文件中的主机，但它也不起作用.

However the problem still persists. I also tried replacing the host in that file with my actual ip, but it does not work either.

更新2:正如评论中所提到的，前段时间我遇到了类似的问题，当我尝试从同一网络中的手机访问我的烧瓶服务器时.那时我将主机变量设置为 pc 的 IP 并且它工作正常.刚才再次测试时，我意识到我必须并行使用的公司代理可以在其中发挥作用.当我没有通过使用 plink.exe 连接时，我无法从我的手机访问我正在运行的 Flask 服务器.当我之后连接时，一切正常.代理或丢失的配置是否会妨碍我访问我的 vue 应用程序?

UPDATE 2: As mentioned in a comment, I had a similar problem some time ago, when trying to access my flask server from my phone which was in the same network. Back then I set the host variable to the pc's IP and it worked. As I tested again just now, I realized that the corporation proxy I have to use in parallel could play a role in this. When I wasn't connected via using plink.exe, I could not access my running flask server from my phone. When I connected after that, everything is working. Could the proxy or a missing configuration be hindering me to access my vue application?

更新 3:所以我完全关闭了防火墙，然后我可以从另一台设备访问该页面.我想知道是否有其他规则像这篇文章中那样阻塞了端口 Windows 防火墙 - Laravel Artisan Serve - 允许入站规则中的端口(不工作).但我不确定如果有一个阻止我的端口，我将如何找到该规则?

UPDATE 3: so i turned of my firewall completely and then i could access the page from another device. I wondered if some other rule was blocking the port like in this post Windows Firewall - Laravel Artisan Serve - Allow Port in Inbound Rule (not working). But I am not sure how I would find that rule if there is one blocking my port?

推荐答案

请点击此链接:解决这个问题

我将以下代码添加到我的 vue.config.js

I add the following code to my vue.config.js

module.exports = {
  devServer: {
    port: 80,
    host: '0.0.0.0'
  }
}

根据需要更改端口号.

这篇关于从同一网络中的其他设备访问 Vue.js 应用程序(也使用代理)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！