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項目之后,
- 局域網(wǎng)內(nèi)的其他PC2、PC3能夠通過
10.108.10.11訪問到此服務。 - PC1可以通過
127.0.0.1、localhost訪問到此服務。
圖解如下:

為什么會有以上現(xiàn)象
為了解答這個疑惑,先來看幾個前置概念
什么是webpack-dev-server
- webpack-dev-server 是一個本地開發(fā)服務器。
- devServer的host配置項
- devServer.host 配置項用于配置DevServer服務器監(jiān)聽的地址。
- 按照上述配置,則PC1啟動vue項目之后:
- 該局域網(wǎng)內(nèi)的其他PC能夠通過http://10.108.10.11:9090/【具體路由】訪問該服務。
- 本機PC1可以通過127.0.0.1、localhost訪問到該服務。
什么是0.0.0.0
搜索到的解釋有如下幾種:
- 0.0.0.0 有幾個不同的含義,不過當告訴服務器監(jiān)聽了 0.0.0.0,意味著監(jiān)聽每一個可用的網(wǎng)絡接口。
- 在服務器中,0.0.0.0并不是一個真實的的IP地址,它表示本機中所有的IPV4地址。
- 特殊的源地址,表示的是網(wǎng)絡上的所有主機,一般在寫服務端程序綁定監(jiān)聽地址時常用此地址。
通俗一些來講,就是,如果希望自己的服務能夠被在同一局域網(wǎng)內(nèi)所有設備訪問到,則監(jiān)聽0.0.0.0就可以實現(xiàn)。
什么是127.0.0.1
- 特殊的環(huán)回地址,大多數(shù)系統(tǒng)把此IP地址分配給環(huán)回接口(Loopback Interface),并命名為localhost,一般用來對運行在同一臺主機上的程序通過TCP/IP進行通信。
- ping 127.0.0.1 可用來測試本機TCP/IP是否正常。能ping通,就說明本機的網(wǎng)卡和IP協(xié)議安裝都沒有問題。
- 該 ip 地址不能使用在公網(wǎng) ip 上,對任何一臺電腦來說,不管是否連接到Internrt上,127.0.0.1 都是指向自己。
- 事實上整個 127.* 網(wǎng)段都是環(huán)回地址,127.* 都為保留地址,只是規(guī)則制定者將其中的 127.0.0.1 規(guī)定為指向本機自己。
- 本地環(huán)回地址主要用于網(wǎng)絡軟件測試以及本地機進程間通信,無論什么程序,一旦使用環(huán)回地址發(fā)送數(shù)據(jù),協(xié)議軟件立即返回,不進行任何網(wǎng)絡傳輸, 127.0.0.1可以認為是計算機上的一個虛擬網(wǎng)卡的ip地址。
- 發(fā)送到127.0.0.1的數(shù)據(jù)或者從127.0.0.1返回的數(shù)據(jù)只會在本機進行傳輸, 而不進行外部網(wǎng)絡傳輸。
- 127.0.0.1是通過網(wǎng)卡傳輸,依賴網(wǎng)卡,并受到網(wǎng)絡防火墻和網(wǎng)卡相關的限制。
通俗一些來講,當本機測試某應用程序,本機可以通過127.0.0.1來訪問該程序。
- localhost首先是一個域名。
- localhot(local)是不經(jīng)網(wǎng)卡傳輸!這點很重要,它不受網(wǎng)絡防火墻和網(wǎng)卡相關的的限制。
- localhost:本地服務器,它是本地的一個地址,可以被配置為任意的IP地址。
通俗一些來講,當本機測試某應用程序,本機可以通過localhost來訪問該程序。
到此這篇關于webpack-dev-server 的 host 配置 0.0.0.0的文章就介紹到這了,更多相關webpack-dev-server host 配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript數(shù)據(jù)類型判斷之Object.prototype.toString.call() 的詳解(示
`Object.prototype.toString.call()`是JavaScript中判斷數(shù)據(jù)類型的強大方法,可以精確區(qū)分所有內(nèi)置類型,包括原始類型和對象類型,適用于跨環(huán)境檢測和區(qū)分自定義類實例,感興趣的朋友跟隨小編一起看看吧2024-11-11
JS傳遞對象數(shù)組為參數(shù)給后端,后端獲取的實例代碼
下面小編就為大家?guī)硪黄狫S傳遞對象數(shù)組為參數(shù)給后端,后端獲取的實例代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
bootstrap fileinput 插件使用項目總結(經(jīng)驗)
這篇文章主要介紹了bootstrap fileinput 插件使用項目總結,是小編日常碰到的問題及解決方法,需要的朋友可以參考下2017-02-02

