webpack-dev-server 的 host 配置 0.0.0.0的方法

配置成0.0.0.0有什么意义

假如某个vue项目的webpack配置如下：

在这module.exports = {
  dev: {
	...//其余的配置
    host: '0.0.0.0',
    port:9090,
  },

当PC1（ip：10.108.10.11）本地启动该vue项目之后，

• 局域网内的其他PC2、PC3能够通过10.108.10.11访问到此服务。
• PC1可以通过127.0.0.1、localhost访问到此服务。

图解如下：

为什么会有以上现象

为了解答这个疑惑，先来看几个前置概念

什么是webpack-dev-server

• webpack-dev-server 是一个本地开发服务器。
• devServer的host配置项
• devServer.host 配置项用于配置DevServer服务器监听的地址。
• 按照上述配置，则PC1启动vue项目之后：
• 该局域网内的其他PC能够通过http://10.108.10.11:9090/【具体路由】访问该服务。
• 本机PC1可以通过127.0.0.1、localhost访问到该服务。

webpack-DevServer

什么是0.0.0.0

搜索到的解释有如下几种：

• 0.0.0.0 有几个不同的含义，不过当告诉服务器监听了 0.0.0.0，意味着监听每一个可用的网络接口。
• 在服务器中，0.0.0.0并不是一个真实的的IP地址，它表示本机中所有的IPV4地址。
• 特殊的源地址，表示的是网络上的所有主机，一般在写服务端程序绑定监听地址时常用此地址。

通俗一些来讲，就是，如果希望自己的服务能够被在同一局域网内所有设备访问到，则监听0.0.0.0就可以实现。

什么是127.0.0.1

• 特殊的环回地址，大多数系统把此IP地址分配给环回接口（Loopback Interface），并命名为localhost，一般用来对运行在同一台主机上的程序通过TCP/IP进行通信。
• ping 127.0.0.1 可用来测试本机TCP/IP是否正常。能ping通，就说明本机的网卡和IP协议安装都没有问题。
• 该 ip 地址不能使用在公网 ip 上，对任何一台电脑来说,不管是否连接到Internrt上,127.0.0.1 都是指向自己。
• 事实上整个 127.* 网段都是环回地址，127.* 都为保留地址，只是规则制定者将其中的 127.0.0.1 规定为指向本机自己。
• 本地环回地址主要用于网络软件测试以及本地机进程间通信，无论什么程序，一旦使用环回地址发送数据，协议软件立即返回，不进行任何网络传输, 127.0.0.1可以认为是计算机上的一个虚拟网卡的ip地址。
• 发送到127.0.0.1的数据或者从127.0.0.1返回的数据只会在本机进行传输, 而不进行外部网络传输。
• 127.0.0.1是通过网卡传输，依赖网卡，并受到网络防火墙和网卡相关的限制。

通俗一些来讲，当本机测试某应用程序，本机可以通过127.0.0.1来访问该程序。

• localhost首先是一个域名。
• localhot（local）是不经网卡传输！这点很重要，它不受网络防火墙和网卡相关的的限制。
• localhost：本地服务器，它是本地的一个地址，可以被配置为任意的IP地址。

通俗一些来讲，当本机测试某应用程序，本机可以通过localhost来访问该程序。

到此这篇关于webpack-dev-server 的 host 配置 0.0.0.0的文章就介绍到这了,更多相关webpack-dev-server host 配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！