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

Question

所以我的问题基本上和这里一样，但问题还没有得到回答。

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

提前感谢！

更新：因此，在找到一些其他帖子后，我也尝试在vue.config.js中写一些东西，比如here、here或here，例如

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

然而，这个问题仍然存在。我还尝试用我的实际ip替换该文件中的主机，但也不起作用。

更新2:正如一条评论中所提到的，我不久前也遇到了类似的问题，当时我试图从同一网络中的手机访问我的烧瓶服务器。当时我把主机变量设置为电脑的IP，它就工作了。当我刚才再次测试时，我意识到我必须同时使用的公司代理可能会在这方面发挥作用。当我没有使用plink.exe连接时，我无法从手机访问正在运行的烧瓶服务器。当我在那之后连接时，一切都在工作。代理或丢失的配置会阻碍我访问vue应用程序吗

更新3：所以我完全打开了防火墙，然后我可以从另一个设备访问页面。我想知道是否有其他规则阻止了端口，比如在这个后Windows防火墙中的Laravel Artisan Serve-允许入站规则中的端口(不起作用(。但我不确定如果有人阻塞了我的端口，我会怎么找到这个规则？

Answer 1

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

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

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

根据需要更改端口号。

Answer 2

步骤1：在package.json 中的脚本下添加以下内容

"serve": "vue-cli-service serve --host 0.0.0.0"

步骤2：运行npm install @vue/cli-service

步骤3：运行npm run serve

这将在与您的开发端口不同的端口启动应用程序。在终端中，您可以看到可用于在手机浏览器中查看应用程序的网络地址。

Answer 3

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

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

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