vue项目Network: unavailable的问题及解决
更新时间：2023年09月26日 16:53:53 作者：Lucy-
这篇文章主要介绍了vue项目Network: unavailable的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue项目Network: unavailable问题
vue项目npm run serve 后，只有localhost访问，network不能访问，
可能有三种情况：
- 多个网卡原因：打开网络共享中心，把多余的网络禁用掉，只留一个
- 在中配置host及public
- 系统环境变量问题
由于这个Network是被写死进文件中的，所以如果网络被切换了，记得修改ip地址，确保与当前的联网ip一致
解决办法1：项目文件vue.config.js文件中配置
在vue项目根目录下找到或创建 vue.config.js 文件
在devServer配置里面添加public，如下代码所示。
public:‘192.168.1.2:8080’,
module.exports = {
configureWebpack: {},
devServer: { // 环境配置
host: '0.0.0.0',
public: '192.168.1.2:8080', // 此处是自己电脑IP地址！
port: '8080',
https: false,
disableHostCheck: true,
open: false // 配置自动启动浏览器
}
}那么，如何看public后的自己电脑IP地址？
方法一
打开 控制面板\所有控制面板项\网络和共享中心
在网络连接窗口中双击打开正在使用的网络
点击详细信息，找到 IPv4地址，复制添加到pubilc后重新运行后即可
方法二
win+R 输入cmd进入控制台，输入 ipconfig 查看
解决办法2：系统环境变量配置
计算机右键--属性--高级系统设置--环境变量
C:\Windows\system32C:\WindowsC:\Windows\System32\Wbem
配完环境变量再重启vscode，再重新运行项目，发现network有了ip+port。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Vue2中实现useDraggable的相关知识,文中的示例代码简洁易懂,对我们深入了解vue有一定的帮助,需要的小伙伴可以参考下2023-12-12
Element-Plus el-col、el-row快速布局及使用方法
这篇文章主要介绍了Element-Plus el-col、el-row快速布局及使用方法,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了VUE v-model表单数据双向绑定,结合完整实例形式分析了vue.js实现表单数据双向绑定相关操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要为大家详细介绍了vue实现评论列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
keepalive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染，也就是所谓的组件缓存，这篇文章主要介绍了说说你对Vue的keep-alive的理解,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue组件渲染与更新实现过程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-03-03
这篇文章主要为大家详细介绍了vue登录路由验证的实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
vue2.x,vue3.x使用provide/inject注入的区别说明
这篇文章主要介绍了vue2.x,vue3.x使用provide/inject注入的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue上通过krpano.js实现360全景图,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue中radio单选框如何实现取消选中状态问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
最新评论