vue項(xiàng)目不能使用localhost訪問(wèn)的解決
vue項(xiàng)目不能使用localhost訪問(wèn)
問(wèn)題
vue項(xiàng)目不能使用localhost訪問(wèn),但是使用本機(jī)的ip加端口號(hào)是可以訪問(wèn)的
解決辦法
如果使用的是webstorm的話.可能右下角會(huì)有錯(cuò)誤的提示，打開(kāi)就會(huì)發(fā)現(xiàn)提示win10的防火墻攔截了
所以，關(guān)閉防火墻.再次使用localhost訪問(wèn)
OK，問(wèn)題解決~
為何vue打包的項(xiàng)目只能localhost才能訪問(wèn)，本機(jī)IP不可以？
1. 在config/index.js,把host:'localhost'改為host:'0.0.0.0',重新編譯即可
ip 0.0.0.0 是什么意思
IPV4中，0.0.0.0地址被用于表示一個(gè)無(wú)效的，未知的或者不可用的目標(biāo)。
作用
- 在服務(wù)器中，0.0.0.0指的是本機(jī)上的所有IPV4地址，如果一個(gè)主機(jī)有兩個(gè)IP地址，192.168.1.1 和 10.1.2.1，并且該主機(jī)上的一個(gè)服務(wù)監(jiān)聽(tīng)的地址是0.0.0.0 和端口 8080,那么通過(guò)這兩個(gè)<ip地址:8080>都能夠訪問(wèn)該服務(wù)。
- 在路由中，0.0.0.0表示的是默認(rèn)路由，即當(dāng)路由表中沒(méi)有找到完全匹配的路由的時(shí)候所對(duì)應(yīng)的路由。
用途總結(jié)
- 當(dāng)一臺(tái)主機(jī)還沒(méi)有被分配一個(gè)IP地址的時(shí)候，用于表示主機(jī)本身。（DHCP分配IP地址的時(shí)候）
- 用作默認(rèn)路由，表示”任意IPV4主機(jī)”。
- 用來(lái)表示目標(biāo)機(jī)器不可用。
- 用作服務(wù)端，表示本機(jī)上的任意IPV4地址。
網(wǎng)關(guān)地址 0.0.0.0 表示直連規(guī)則，即當(dāng)前記錄對(duì)應(yīng)的 Destination 跟本機(jī)在同一個(gè)網(wǎng)段，通信時(shí)不需要經(jīng)過(guò)網(wǎng)關(guān)(路由器)。也就是說(shuō)使用二層交換機(jī)通過(guò)MAC即可通信。
- 命中容器的路由表直連規(guī)則，意思是目的IP是在局域網(wǎng)內(nèi)，不用走到出口網(wǎng)關(guān)
- 局域網(wǎng)內(nèi)直接是通過(guò)二層網(wǎng)絡(luò)來(lái)發(fā)送包。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在頁(yè)面進(jìn)行pdf預(yù)覽的時(shí)候，由于文件不能夠打印和下載很難滿足客戶的需求，接下來(lái)通過(guò)本文給大家介紹vue使用pdf.js來(lái)進(jìn)行pdf預(yù)覽,需要的朋友可以參考下2021-12-12
Vue使用v-model封裝el-pagination組件的全過(guò)程
通過(guò)封裝el-pagination組件開(kāi)發(fā)自定義分頁(yè)組件的類(lèi)似文章網(wǎng)上已經(jīng)有很多了，但看了一圈，總是不如意，于是決定還是自己動(dòng)手搞一個(gè)，對(duì)v-model封裝el-pagination組件相關(guān)知識(shí)感興趣的朋友一起看看吧2021-07-07
vue項(xiàng)目中data數(shù)據(jù)之間互相訪問(wèn)的實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目中data數(shù)據(jù)之間互相訪問(wèn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了vue項(xiàng)目中如何添加枚舉，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)百度搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
vue-openlayers實(shí)現(xiàn)地圖坐標(biāo)彈框效果
這篇文章主要為大家詳細(xì)介紹了vue-openlayers實(shí)現(xiàn)地圖坐標(biāo)彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
使用Vue實(shí)現(xiàn)點(diǎn)擊按鈕小球加入購(gòu)物車(chē)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)點(diǎn)擊按鈕小球加入購(gòu)物車(chē)動(dòng)畫(huà),文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
vue-element-admin后臺(tái)生成動(dòng)態(tài)路由及菜單方法詳解
vue-element-admin后臺(tái)管理系統(tǒng)模板框架 是vue結(jié)合element-ui一體的管理系統(tǒng)框架,下面這篇文章主要給大家介紹了關(guān)于vue-element-admin后臺(tái)生成動(dòng)態(tài)路由及菜單的相關(guān)資料,需要的朋友可以參考下2023-09-09
腳手架vue-cli工程webpack的作用和特點(diǎn)
webpack是一個(gè)模塊打包的工具，它的作用是把互相依賴(lài)的模塊處理成靜態(tài)資源。這篇文章主要介紹了vue-cli工程webpack的作用和特點(diǎn),需要的朋友可以參考下2018-09-09
vue實(shí)現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能
這篇文章主要介紹了vue實(shí)現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能,需要的朋友可以參考下2019-04-04