无法通过IP地址在其他设备上访问Vue项目，使用vue cli 3 npm。

Question

我有一个使用Vue CLI 3创建的项目。当我运行“npm run serve”命令时，它会给出以下成功消息（我使用假＃替换了我的IP地址）：

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

我的电脑上一切正常。我可以通过本地和IP地址访问，但其他连接到同一Wi-Fi网络的设备无法使用网络地址访问。

我尝试了以下方法：

On vue.config.js:
devServer: {
    host: '0.0.0.0'
}

and
devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false
}

on my package.json:
"scripts": {
    "serve": "vue-cli-service serve --host 0.0.0.0",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
}

and
"scripts": {
    "serve": "vue-cli-service serve --host 0.0.0.0 --allowed-hosts 1.2.3.4",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
}

我的Tomcat服务器运行在80端口，我的电脑和其他设备都可以正常使用...但我不确定该怎么做...

这是我遇到的错误页面： 我应该如何让其他设备通过相同的网络访问我的Vue项目呢？

感谢您的时间和帮助！

- Leesa

Answer 1

迄今为止，在任何Vue.js项目中运行 npm run serve 将允许您从本地或网络中的任何设备访问该项目（应用程序运行在）：

如果您在Windows下（作为主机），并且从CLI访问上述地址时，其他设备无法访问该项目，则需要在防火墙设置中允许Node.js的入站连接：

搜索与Node.js相关的规则并修改它们，以允许入站连接：

在我的情况下，我有4个与Node.js相关的规则，允许入站连接后，我能够从我的桌面电脑上提供的项目中访问同一网络中我的移动设备。

- Carlos Delgado

Answer 2

因为你只访问自己的设备。让我们尝试移除 --allowed-hosts 1.2.3.4

- gokhanozgur

Answer 3

首先，在devserver的主机参数中，您必须添加您路由器的合法IP地址，以使其正常工作。但是，如果您不需要特定的设置，只想在您的网络上提供服务：

我通常只在我的package.json文件中这样做：

 "serve": "vue-cli-service serve",

在vue.config.js中，您可以删除与devServer相关的所有内容。这将创建一个可以在您的网络上工作的开发服务器。

- Komi