从同一网络中的其他设备访问 Vue.js 应用程序（也使用代理）

Posted 2023-02-22

【中文标题】从同一网络中的其他设备访问 Vue.js 应用程序（也使用代理）

【英文标题】：Access Vue.js application from other device in the same network (also using proxy)

【发布时间】：2020-08-14 11:03:30

【问题描述】：

所以我的问题和here基本一样，但是问题还没有回答。

问题在于，当我访问<pc_ip>:8080 时，我无法在浏览器中查看我的 vue 应用程序。但是，当使用 npm run serve 启动我的 vue.js 应用程序时，它告诉我，除了执行localhost:8080 之外，这就是我可以访问该页面的方式。 它可以在我的电脑上运行，但我的手机连接到同一个 wifi 时，我收到无法访问 url 的错误。

提前致谢！

更新： 因此，在找到其他一些帖子后，我还尝试将一些内容写入 vue.config.js，例如 here、here、here 或 here，例如

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

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

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

更新 3：所以我完全关闭了我的防火墙，然后我可以从另一台设备访问该页面。我想知道是否有其他规则像这篇文章Windows Firewall - Laravel Artisan Serve - Allow Port in Inbound Rule (not working) 那样阻塞了端口。但是我不确定如果有一个阻塞我的端口，我将如何找到该规则？

【问题讨论】：

很可能是您的防火墙阻止了它

感谢您的提示。我使用的是 Windows 10，所以我尝试向我的防火墙添加入站/出站规则。我为规则选择了端口 8080。但是还是不行，有没有其他和防火墙相关的可以试试？

假设您为入站 TCP 端口打开了 8080……您的另一个问题可能是您的 wifi 路由器，有时它们会阻止设备联系同一网络上的其他设备，通常有一个设置可以打开关闭

没错，这就是我作为规则添加的内容。我会用路由器检查一下，谢谢。但是我很惊讶，因为前段时间我的烧瓶服务器遇到类似问题时，我不需要对路由器进行任何更改。

可能不是那样......只是链条中有很多东西会导致问题。即，另一个问题是您不小心关闭了 wifi 并且您的数据正在通过移动网络....

【参考方案1】：

通常，当您执行 npm run serve 命令时，它会为您提供两个地址来访问您的应用程序。本地地址和网络地址。像这样：

App running at:
   - Local: http: // localhost: 8080 /
   - Network: http://IP_ADDRESSE:8080/                                                        

所以你的手机应该使用网络地址而不是本地地址。

【讨论】：

或者你可能在运行服务器之前关闭了你的电脑的 wifi/你没有连接到你的网络。所以它没有为您提供网络地址。

是的，我使用了手机中的网络地址，并确保我连接到同一个网络。只是为了确保，我稍后会再试一次。无论如何谢谢你的回答:)

【参考方案2】：

请点击此链接： Work around this problem

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

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

根据需要更改端口号。