devServer的其他配置-host解析
host设置主机地址:
默认值是localhost;
如果希望其他地方也可以访问,可以设置为 0.0.0.0;
localhost 和 0.0.0.0 的区别:
localhost:本质上是一个域名,通常情况下会被解析成127.0.0.1;
127.0.0.1:回环地址(Loop Back Address),表达的意思其实是我们主机自己发出去的包,直接被自己接收;
正常的数据库包经常 应用层 - 传输层 - 网络层 - 数据链路层 - 物理层 ;
而回环地址,是在网络层直接就被获取到了,是不会经常数据链路层和物理层的;
比如我们监听 127.0.0.1时,在同一个网段下的主机中,通过ip地址是不能访问的;
0.0.0.0:监听IPV4上所有的地址,再根据端口找到不同的应用程序;
比如我们监听 0.0.0.0时,在同一个网段下的主机中,通过ip地址是可以访问的;
场景描述
devServer: {
host: 'localhost'
//host: '127.0.0.1'
}
假如我们把devServer.host的值设置为localhost或127.0.0.1,执行npm run serve,把项目运行起来,我们可以在本主机上通过localhost或127.0.0.1访问本项目的网页,但是在同一个网段下的我的同事在他的电脑上是无法访问的。
如果我希望项目运行起来后,不仅在我的主机上可以访问,在同一个网段下的我的同事的主机也可以访问,可以把devServer.host设置为’0.0.0.0’
devServer: {
host: '0.0.0.0'
}
这样,在我的主机上依然可以通过localhost或127.0.0.1访问本项目的网页,在同一个网段下的我的同事在他的电脑上可以通过访问我的ip地址访问项目网页
如果手动在vue.config.js文件中把devServer.host设置为localhost,运行项目,发现只能通过http://localhost:8080/访问项目了
vue cli创建项目时默认设置devServer.host为’0.0.0.0’