用了这么多年的Webpack和Vite，你真的了解服务器的host配置吗？

前言

最近接手了很多项目，devServer的host配置非常凌乱，有配置'localhost',也有配置ip地址的，还有配置0.0.0.0的，虽然自己也工作了这么多年，但是配置他们的区别，我还真的没有仔细思考过，今天我就通过概念和实战效果两个方面让大家了解下

概念

私有IP(局域网)

私有IP地址 通常称内网（即局域网）中的IP地址为私有地址。私有地址是非注册地址，用于组织机构内部使用。私有地址的范围以下：

A类IP地址中：10.0.0.0–10.255.255.255 B类IP地址中：172.16.0.0–172.31.255.255 C类IP地址中：192.168.0.0–192.168.255.255 私有地址与公有地址不一样，并非由Internet分配的，是不容许出如今Internet中的，咱们在公网中是看不到私有IP地址的，而且公有地址也不会使用上述的三类地址。因此，私有地址是不能直接与Internet链接的。
在同一个局域网内，IP地址是惟一的；可是在不一样的局域网内，IP地址是能够重复出现的

公有IP

公有IP地址 通常称公网中的IP地址为公有地址。公有地址由Inter NIC（因特网信息中心）负责，这些IP地址分配给注册并向Inter NIC提出申请的组织机构。
公有地址是全球惟一的，公网中不可能存在两个相同的IP地址。
范围：除了私有地址之外的地址，都属于公有地址
IPV4
根据TCP/IP协议规定，我们现在所用的IPv4地址是由32位二进制数组成，为了方便记忆，人们将组成IP地址的32位二进制分成四段，每段8位2进制数，中间用小数点隔开，然后将每八位二进制转换成十进制数（2^4=256 最大255），这样就有了我们常见的IP地址，如：215.35.130.23。
IPv6
IPv6是英文“Internet Protocol Version 6”（互联网协议第6版）的缩写，是互联网工程任务组（IETF）设计的用于替代IPv4的下一代IP协议
IPv6的128位地址通常写成8组，每组为四个十六进制数的形式（十六进制是4个2进制，四个16进制就是16个2进制 也就是说每段有16个2进制 16*8=128位）。
比如：AD80:0000:0000:0000:ABAA:0000:00C2:0002 是一个合法的IPv6地址
localhost、127.0.0.1和0.0.0.0和本机IP的区别
localhost
localhost实际上是域名，通常windows系统默认将localhost指向127.0.0.1，可是localhost并不等于127.0.0.1，localhost指向的IP地址是能够配置的
修改localhost对应的IP地址
以windows电脑为例 localhost的配置文件地址在下面路径
C:\Windows\System32\drivers\etc\hosts
打开hosts文件我们发现

# localhost name resolution is handled within DNS itself.
#    127.0.0.1       localhost
#    ::1             localhost

127.0.0.1
首先咱们要先知道一个概念，凡是以127开头的IP地址，都是回环地址（Loop back address），其所在的回环接口通常被理解为虚拟网卡，并非真正的路由器接口。

所谓的回环地址，通俗的讲，就是咱们在主机上发送给127开头的IP地址的数据包会被发送的主机本身接收，根本传不出去，外部设备也没法经过回环地址访问到本机。

正常的数据包会从IP层进入链路层，而后发送到网络上；而给回环地址发送数据包，数据包会直接被发送主机的IP层获取，不会进入链路层。

而127.0.0.1做为127开头IP地址，也是个回环地址。只不过127.0.0.1常常被默认配置为localhost的IP地址。 通常会经过ping 127.0.0.1来测试某台机器上的网络设备是否工做正常。

0.0.0.0
首先，0.0.0.0是不能被ping通的。在服务器中，0.0.0.0并非一个真实的的IP地址，它表示本机中全部的IPV4地址。监听0.0.0.0的端口，就是监听本机中全部IP的端口。

本机IP
本机IP一般仅指在同一个局域网内，能同时被外部设备访问和本机访问的那些IP地址（可能不止一个）。像127.0.0.1这种通常是不被看成本机IP的。本机IP是与具体的网络接口绑定的，好比以太网卡、无线网卡或者PPP/PPPoE拨号网络的虚拟网卡，想要正常工做都要绑定一个地址，不然其余设备就不知道如何访问它。

实践

概念我们也了解了，接下来，我们以vite项目进行配置实践
Vite.config.ts中的host配置
我们先来看下官网说明
server.host
类型： string | boolean
默认： 'localhost'
指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址。
也可以通过 CLI 使用 --host 0.0.0.0 或 --host 来设置。

我的本机局域网ip是10.15.0.50
vite.config.ts server的配置默认的host是localhost,端口号3000
如果host的配置是localhost或者不配置host

export default defineConfig({
  plugins: [vue()],
  server:{
    host:'localhost',
    port:3000,
  },
})

localhost:3000 可访问项目
127.0.0.1:3000 可访问项目
10.15.0.50:3000 不可访问项目
127.0.0.2:3000 不可访问项目
如果host的配置是127.0.0.1

export default defineConfig({
  plugins: [vue()],
  server:{
    host:'127.0.0.1',
    port:3000,
  },
})

localhost:3000 可访问项目
127.0.0.1:3000 可访问项目
10.15.0.50:3000 不可访问项目
127.0.0.2:3000 不可访问项目
效果和配置localhost一样
如果host的配置是10.15.0.50

export default defineConfig({
  plugins: [vue()],
  server:{
    host:'10.15.0.50',
    port:3000,
  },
})

localhost:3000 不可访问项目
127.0.0.1:3000 不可访问项目
10.15.0.50:3000 可访问项目
127.0.0.2:3000 不可访问项目
如果host的配置是0.0.0.0

export default defineConfig({
  plugins: [vue()],
  server:{
    host:'0.0.0.0',
    port:3000,
  },
})

localhost:3000 可访问项目
127.0.0.1:3000 可访问项目
10.15.0.50:3000 可访问项目
127.0.0.2:3000 可访问项目
10.15.0.51:3000 不可访问项目
如果host的配置是true

export default defineConfig({
  plugins: [vue()],
  server:{
    host:true,
    port:3000,
  },
})

结果和host配置0.0.0.0效果一致
补充
上面的几种配置，只要在本机上通过IP地址10.15.0.50:3000访问项目的，局域网内的其他电脑也能通过10.15.0.50:3000访问自己的项目。但是如果只能通过localhost:3000或者127.0.0.1:3000访问不能通过10.15.0.50:3000访问的，那么局域网内其他电脑是不能访问本机电脑项目的