Vue启动报错 Error: listen EADDRNOTAVAIL

因为电脑有问题，昨天重装了我的系统，重装后使用 npm run dev 命令启动Vue项目报错，Error: listen EADDRNOTAVAIL ，截图如下：

报错已经在图中框出，这个EADDRNOTAVAIL我的英文水平有限，使用翻译都查不出来是什么意思，但是人家好歹说了就是你的地址加端口这里出了问题。

我的vue项目中地址配置是这样的：

如果是webpack-simple创建的项目是在这里查看IP地址，我是传送门，点我

后来发现host使用localhost的话，项目又能够正常启动，于是我又陷入了疑惑之中……

看到这里，大家可能已经发现点什么了，我是直到今天早上，突然灵光一闪才想起来，我的IP之前是手动绑定的，是192.168.3.XXX，重装后没有修改我本地的IP地址，是自动获取的，IP为192.168.5.XXX，好了，直到这里，问题就迎刃而解了。

 

知识拓展一下：

vue项目地址配置中，我们可以填入以下几个：

 

 

vue项目中的host设置与访问路径

host设置	可访问路径	说明
localhost	localhost 127.0.0.1	localhost是在host文件中默认与127.0.0.1映射，代表本地 因此两者之间可以互相访问
127.0.0.1	localhost 127.0.0.1	解释同上
0.0.0.0	localhost 127.0.0.1 192.168.X.XX	0.0.0.0我们平时很少用到，我也是偶然才发现还能这样写 我们也可以发现一件很有趣的事情：其他三种路径都可以访问，唯独使用0.0.0.0却访问不了 这是一个保留地址，具体原理暂不深究，但这种方式能让其他的默认地址都访问
192.168.X.XX	192.168.X.XX	使用这种局域网IP的方式，最大的优点就是别人能通过IP地址访问到自己的项目； 当然0.0.0.0也能够同样实现，只是这种方式在我们启动完项目之后，能够直接点击控制台的地址打开访问（懒癌）

总结：

通过以上的host的方式，我自己总结了几个使用场景：

1、当项目只在自己的项目中运行、访问时，可以使用默认的localhost，不必修改任何东西；

2、项目在你自己的电脑上运行、调试、团队其他成员需要访问你的页面，使用192.168.X.XX。为什么不用0.0.0.0呢？因为懒，每次项目启动完后，我就能直接点击控制台的地址访问了，为什么还要重新输地址对吧。还有就是，使用webpack-simple的项目，启动后会自动打开默认浏览器访问，每次还要修改地址多麻烦。