npm run dev 生成network网址无法被同局域网下的其他主机访问

当使用 npm run dev 运行开发服务器时,通常该服务器只会监听本地主机(localhost),这意味着只有在运行服务器的计算机上可以访问。如果你希望其他主机也能够访问该开发服务器,你可能需要配置服务器以监听所有可用的网络接口,而不仅仅是 localhost。

以下是一些可能的解决方法:

方法1:指定 IP 地址和端口

在你的 npm run dev 命令中,可以尝试指定服务器绑定的 IP 地址和端口。例如:

npm run dev -- --host 0.0.0.0 --port 3000

这会使服务器监听所有可用的网络接口 (0.0.0.0),而不仅仅是 localhost,并将端口设置为 3000。确保你使用的端口没有被其他进程使用。

方法2:配置开发服务器

如果你使用的是 Webpack 开发服务器或类似的工具,查看配置文件,看看是否有类似于以下的配置:

devServer: {
  host: '0.0.0.0',
  port: 3000,
  // 其他配置项...
}

方法3:检查防火墙设置

确保你的防火墙设置允许从其他主机访问该端口。如果有防火墙正在运行,你可能需要配置它以允许入站连接。

方法4:检查网络配置

确保你的计算机和其他主机在同一个网络中,且彼此可达。检查网络配置,确保没有阻止或限制局域网内部的通信。

方法5:检查主机文件

在某些情况下,添加一个主机文件条目可能有助于解决问题。在其他主机上尝试将开发服务器的 IP 地址映射到一个域名,例如:

开发服务器的IP 地址    开发服务器的域名
192.168.1.2            mydevserver.local

将上述条目添加到其他主机的主机文件中。

请注意,这些解决方法可能因你使用的具体工具和配置而有所不同。确保查看相关文档或配置文件,以了解如何正确配置你的开发服务器。

  • 9
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
问题的原因可能是你的开发服务器配置中的public参数设置不正确。根据引用\[1\]和引用\[2\]的内容,你可以尝试以下两种方法来解决这个问题。 方法一:在webpack配置文件中添加public参数 在你的webpack配置文件中,找到devServer配置项,并将public参数设置为你的本机IP地址和端口号,如下所示: ``` public: '本机IP地址:8080', ``` 确保将"本机IP地址"替换为你的实际IP地址。然后重新运行npm run dev命令,看看问题是否解决。 方法二:在package.json文件中添加serve命令 在你的package.json文件中,找到"scripts"字段,并将"serve"命令修改为以下内容: ``` "serve": "vue-cli-service serve --public 0.0.0.0:8080", ``` 确保将"0.0.0.0"替换为你的实际IP地址。然后重新运行npm run dev命令,看看问题是否解决。 如果以上方法都没有解决你的问题,可能是由于你的电脑上有多个IPv4地址导致的。根据引用\[3\]的内容,当你的电脑上有多个IPv4地址时,npm run dev命令可能会显示"network unavailable"。你可以尝试在命令行中指定具体的IP地址来解决这个问题,例如: ``` npm run dev -- --host 你的IP地址 ``` 将"你的IP地址"替换为你的实际IP地址。这样可以确保开发服务器使用正确的IP地址进行启动。 希望以上方法能够帮助你解决问题。如果问题仍然存在,请提供更多的信息,以便我能够给出更准确的解决方案。 #### 引用[.reference_title] - *1* [Vue2 dev network:unavailable解决办法](https://blog.csdn.net/kingheart_/article/details/127879470)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [关于VUE中无法npm run serve后network unavailable的解决办法](https://blog.csdn.net/freydog/article/details/124908194)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值