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