关于 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"
  }
}

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

修复后