webpack-dev-server 的 host 配置 0.0.0.0的方法
配置成0.0.0.0有什么意義
假如某個(gè)vue項(xiàng)目的webpack配置如下:
在這module.exports = { dev: { ...//其余的配置 host: '0.0.0.0', port:9090, },
當(dāng)PC1(ip:10.108.10.11
)本地啟動(dòng)該vue項(xiàng)目之后,
- 局域網(wǎng)內(nèi)的其他PC2、PC3能夠通過(guò)
10.108.10.11
訪問(wèn)到此服務(wù)。 - PC1可以通過(guò)
127.0.0.1
、localhost
訪問(wèn)到此服務(wù)。
圖解如下:
為什么會(huì)有以上現(xiàn)象
為了解答這個(gè)疑惑,先來(lái)看幾個(gè)前置概念
什么是webpack-dev-server
- webpack-dev-server 是一個(gè)本地開(kāi)發(fā)服務(wù)器。
- devServer的host配置項(xiàng)
- devServer.host 配置項(xiàng)用于配置DevServer服務(wù)器監(jiān)聽(tīng)的地址。
- 按照上述配置,則PC1啟動(dòng)vue項(xiàng)目之后:
- 該局域網(wǎng)內(nèi)的其他PC能夠通過(guò)http://10.108.10.11:9090/【具體路由】訪問(wèn)該服務(wù)。
- 本機(jī)PC1可以通過(guò)127.0.0.1、localhost訪問(wèn)到該服務(wù)。
什么是0.0.0.0
搜索到的解釋有如下幾種:
- 0.0.0.0 有幾個(gè)不同的含義,不過(guò)當(dāng)告訴服務(wù)器監(jiān)聽(tīng)了 0.0.0.0,意味著監(jiān)聽(tīng)每一個(gè)可用的網(wǎng)絡(luò)接口。
- 在服務(wù)器中,0.0.0.0并不是一個(gè)真實(shí)的的IP地址,它表示本機(jī)中所有的IPV4地址。
- 特殊的源地址,表示的是網(wǎng)絡(luò)上的所有主機(jī),一般在寫服務(wù)端程序綁定監(jiān)聽(tīng)地址時(shí)常用此地址。
通俗一些來(lái)講,就是,如果希望自己的服務(wù)能夠被在同一局域網(wǎng)內(nèi)所有設(shè)備訪問(wèn)到,則監(jiān)聽(tīng)0.0.0.0
就可以實(shí)現(xiàn)。
什么是127.0.0.1
- 特殊的環(huán)回地址,大多數(shù)系統(tǒng)把此IP地址分配給環(huán)回接口(Loopback Interface),并命名為localhost,一般用來(lái)對(duì)運(yùn)行在同一臺(tái)主機(jī)上的程序通過(guò)TCP/IP進(jìn)行通信。
- ping 127.0.0.1 可用來(lái)測(cè)試本機(jī)TCP/IP是否正常。能ping通,就說(shuō)明本機(jī)的網(wǎng)卡和IP協(xié)議安裝都沒(méi)有問(wèn)題。
- 該 ip 地址不能使用在公網(wǎng) ip 上,對(duì)任何一臺(tái)電腦來(lái)說(shuō),不管是否連接到Internrt上,127.0.0.1 都是指向自己。
- 事實(shí)上整個(gè) 127.* 網(wǎng)段都是環(huán)回地址,127.* 都為保留地址,只是規(guī)則制定者將其中的 127.0.0.1 規(guī)定為指向本機(jī)自己。
- 本地環(huán)回地址主要用于網(wǎng)絡(luò)軟件測(cè)試以及本地機(jī)進(jìn)程間通信,無(wú)論什么程序,一旦使用環(huán)回地址發(fā)送數(shù)據(jù),協(xié)議軟件立即返回,不進(jìn)行任何網(wǎng)絡(luò)傳輸, 127.0.0.1可以認(rèn)為是計(jì)算機(jī)上的一個(gè)虛擬網(wǎng)卡的ip地址。
- 發(fā)送到127.0.0.1的數(shù)據(jù)或者從127.0.0.1返回的數(shù)據(jù)只會(huì)在本機(jī)進(jìn)行傳輸, 而不進(jìn)行外部網(wǎng)絡(luò)傳輸。
- 127.0.0.1是通過(guò)網(wǎng)卡傳輸,依賴網(wǎng)卡,并受到網(wǎng)絡(luò)防火墻和網(wǎng)卡相關(guān)的限制。
通俗一些來(lái)講,當(dāng)本機(jī)測(cè)試某應(yīng)用程序,本機(jī)可以通過(guò)127.0.0.1來(lái)訪問(wèn)該程序。
- localhost首先是一個(gè)域名。
- localhot(local)是不經(jīng)網(wǎng)卡傳輸!這點(diǎn)很重要,它不受網(wǎng)絡(luò)防火墻和網(wǎng)卡相關(guān)的的限制。
- localhost:本地服務(wù)器,它是本地的一個(gè)地址,可以被配置為任意的IP地址。
通俗一些來(lái)講,當(dāng)本機(jī)測(cè)試某應(yīng)用程序,本機(jī)可以通過(guò)localhost來(lái)訪問(wèn)該程序。
到此這篇關(guān)于webpack-dev-server 的 host 配置 0.0.0.0的文章就介紹到這了,更多相關(guān)webpack-dev-server host 配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js基于setTimeout與setInterval實(shí)現(xiàn)多線程
這篇文章主要介紹了js基于setTimeout與setInterval實(shí)現(xiàn)多線程的方法,分析了多線程的原理與javascript模擬實(shí)現(xiàn)多線程的相關(guān)技巧,需要的朋友可以參考下2016-06-06js實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01phantomjs導(dǎo)出html到pdf的方法總結(jié)
這篇文章主要介紹了phantomjs導(dǎo)出html到pdf的方法總結(jié),需要的朋友可以參考下2017-10-10BOM系列第一篇之定時(shí)器setTimeout和setInterval
這篇文章主要介紹了BOM系列第一篇之定時(shí)器setTimeout和setInterval 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08微信小程序新聞網(wǎng)站詳情頁(yè)實(shí)例代碼
這篇文章主要介紹了微信小程序新聞網(wǎng)站詳情頁(yè)的實(shí)例代碼,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01