木灵鱼儿

木灵鱼儿

阅读:221

最后更新:2021/12/03/ 20:46:05

关于 vue cli 的Network unavailable的问题分析以及修复方式

发现公司的项目,不管是vue2还是vue3,不管是新创建的还是旧项目,启动后Network永远是unavailable;就很离谱,导致每次想要局域网测试,只能手动在devServer中配置public属性,设置一个固定的本地ip地址。

但是,你的ip地址并不是别人的ip地址,那么就会导致如果不小心上传了vue.config.js;那么同事一拉,哦吼,不懂得就说,哎呀,我的项目怎么启动不了了。

这就很蛋疼了,所以我分析了一下这个问题的原因。

首先,我的电脑的环境是没有问题的,网卡也是没有问题的,vue cli早就支持多个网卡了,所以多网卡问题就可以忽略。

其实主要原因是因为一个不合法的ipv4地址。

目前公司的ip地址是:

192.16.3.199

我的电脑大概是这么一个格式的ip地址,和平常的192.168.3.199这种完全不一样,所以产生了这个问题。

如果不相信的话,可以给电脑设置一个固定ip你再启动,你会发现Network显示就正常了。

问题分析

很明显是vue cli里面对于ip地址获取的方式兼容上有一些问题,在vue cli的issues里面找到一个回复,他说在vue cli中有一个prepareURLs.js文件,里面有一个用于匹配ip的正则:

/^10[.]|^172[.](1[6-9]|2[0-9]|3[0-1])[.]|^192[.]168[.]/

很明显,用这段正则无法正确匹配到192.16.3.199的ip地址。

那么,这个文件在哪?

它存在于你项目的node_modules目录中,路径:/node_modules/@vue/cli-service/lib/util/prepareURLs.js

我们可以在43行(不确定以后改没改);找到这个正则;

修复的方式

第一种

可以直接将prepareURLs.js文件中的正则修改为:

/^10[.]|^172[.](1[6-9]|2[0-9]|3[0-1])[.]|^192[.]16[8]?[.]/

其实就是对后面的8做一个懒惰模式,有没有都可以。

保存后重启项目,Network恢复。

但是这种方式,很容易在重新安装依赖后文件被重新覆盖,问题又会出现,所以,这种方式仅适用于临时测试。

第二种

第二种方式,我们只能退而求其次,设置一个固定的public属性了,只不过我们可以通过node的模块动态获取本机ip地址。

module.exports  = {
  devServer: {
    public: require("os").networkInterfaces()[Object.keys(require("os").networkInterfaces())[0]][1].address + ":9999"
  }
}

端口的话只能固定了,或者采用变量的形式,这个端口在其他地方保存,这边引入使用。

修复后

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 1
文章被阅读 221

相关文章