关于javascript:用了这么多年的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 拜访的，那么局域网内其余电脑是不能拜访本机电脑我的项目的