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。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
缓存清除成为克服浏览器缓存中过时内容挑战的关键技术,术语“缓存清除”是指故意使静态资源失效或进行版本控制,迫使浏览器在发生更改时获取新资源,本文给大家介绍了Vue如何清除缓存,需要的朋友可以参考下2023-12-12
本篇文章主要介绍了Vue使用mixins实现压缩图片代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue下拉刷新组件的开发及slot的使用详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
这篇文章主要介绍了详解VueJS 数据驱动和依赖追踪分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了Vue router传递参数并解决刷新页面参数丢失问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了详解vue的diff算法原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了vue中@路径无法跳转到指定文件的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
Vue3 响应式 API 及 reactive 和 ref&
响应式是一种允许以声明式的方式去适应变化的编程范例，这篇文章主要介绍了关于Vue3响应式API及reactive和ref的用法,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Vue-cli3.X使用px2rem遇到的问题及解决方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了Vuex入门之Module使用详解,由于使用单一状态树,应用的所有状态会集中到一个比较大的对象,当应用变得非常复杂时,store 对象就有可能变得相当臃肿,需要的朋友可以参考下2023-11-11
最新评论