因为电脑有问题,昨天重装了我的系统,重装后使用 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.XX192.168.X.XX

使用这种局域网IP的方式,最大的优点就是别人能通过IP地址访问到自己的项目;

当然0.0.0.0也能够同样实现,只是这种方式在我们启动完项目之后,能够直接点击控制台的地址打开访问(懒癌)

总结:

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

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

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

 

Logo

前往低代码交流专区

更多推荐