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