npm - 无法通过其他设备上的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 地址访问，但我无法通过连接到同一 wifi 网络的其他设备上的网络地址访问。

我尝试了以下方法：

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 项目？

感谢您的时间和帮助！

Answer 1

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

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

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

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

Answer 2

首先，在 devserver 的主机参数中，您必须添加路由器的合法 IP 地址，它才能工作，但如果您不需要特定设置，只希望它在您的网络上提供服务：

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

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

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

Answer 3

因为您只能访问您的设备。让我们尝试删除 --allowed-hosts 1.2.3.4