26.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地址访问项目网页

image.png

如果手动在vue.config.js文件中把devServer.host设置为localhost,运行项目，发现只能通过http://localhost:8080/访问项目了

当前演练的项目是使用vue cli搭建的项目

image.png

可以看到，只能通过这个链接访问了，那就说明只能本机访问，别的电脑是不能访问的，
说明vue cli创建项目时默认设置devServer.host为'0.0.0.0'