vue-cli項(xiàng)目無(wú)法用本機(jī)IP訪問(wèn)的解決方法
所遇問(wèn)題
啟動(dòng)vue-cli項(xiàng)目服務(wù)，用本機(jī)IP無(wú)法訪問(wèn)此網(wǎng)站，拒絕了我們的鏈接請(qǐng)求。從而無(wú)法從手機(jī)上預(yù)覽效果
原因分析
在我們的bulid目錄下有一個(gè)webpack.dev.config.js的配置文件，發(fā)現(xiàn)devServer對(duì)象里的host屬性取自process.env.HOST || config.dev.host。
于是這里我們?nèi)ゲ榭碿onfig.dev.host。在我們的config目錄下有一個(gè)index.js, 找到dev對(duì)象的host屬性
發(fā)現(xiàn)該版本的vue-cli將host主機(jī)名定義為localhost, 從而導(dǎo)致了本地IP不能訪問(wèn)服務(wù)。
解決辦法
將host重新定義為：0.0.0.0即可, 然后重啟服務(wù)，發(fā)現(xiàn)localhost、127.0.0.1、本地IP均能正常訪問(wèn)，這樣就可以用手機(jī)來(lái)預(yù)覽效果啦
host: '0.0.0.0'
以上這篇vue-cli項(xiàng)目無(wú)法用本機(jī)IP訪問(wèn)的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Element-UI控件Tree實(shí)現(xiàn)數(shù)據(jù)樹(shù)形結(jié)構(gòu)的方法
這篇文章主要介紹了Element-UI控件Tree實(shí)現(xiàn)數(shù)據(jù)樹(shù)形結(jié)構(gòu),本期介紹添加、修改等功能也比較簡(jiǎn)單,可以通過(guò)element-ui的$prompt彈框控件來(lái)實(shí)現(xiàn),需要的朋友可以參考下2024-01-01
Vuejs學(xué)習(xí)筆記之使用指令v-model完成表單的數(shù)據(jù)雙向綁定
表單類控件承載了一個(gè)網(wǎng)頁(yè)數(shù)據(jù)的錄入與交互，本章將介紹如何使用指令v-model完成表單的數(shù)據(jù)雙向綁定功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值。感興趣的朋友跟隨小編一起看看吧2019-04-04
vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡(jiǎn)單的拖拽元素功能示例
本篇文章主要介紹了vuejs2.0運(yùn)用原生js實(shí)現(xiàn)簡(jiǎn)單的拖拽元素功能示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-02-02
路由的本質(zhì)就是一種對(duì)應(yīng)關(guān)系，根據(jù)不同的URL請(qǐng)求，返回對(duì)應(yīng)不同的資源。那么url地址和真實(shí)的資源之間就有一種對(duì)應(yīng)的關(guān)系，就是路由2022-11-11
Vue?實(shí)現(xiàn)接口進(jìn)度條示例詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)接口進(jìn)度條功能，在請(qǐng)求數(shù)據(jù)的過(guò)程中，需要添加監(jiān)聽(tīng)函數(shù)來(lái)監(jiān)測(cè)數(shù)據(jù)請(qǐng)求的過(guò)程變化，并更新組件相應(yīng)的屬性和界面元素,本文結(jié)合實(shí)例代碼詳細(xì)講解，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue如何獲取圖片流數(shù)據(jù)并展示問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
Vue3中導(dǎo)入和使用組件幾種常見(jiàn)方法(.vue文件)
組件是Vue.js最強(qiáng)大的功能之一, 組件可以擴(kuò)展HTML元素,封裝可重用的代碼,下面這篇文章主要介紹了Vue3中導(dǎo)入和使用組件幾種常見(jiàn)方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
在Vue中，組件是構(gòu)建用戶界面的基本單位，封裝公共組件是一種良好的實(shí)踐，可以提高代碼的可復(fù)用性和可維護(hù)性，下面我們就來(lái)看看如何封裝一個(gè)公共的按鈕組件吧2023-08-08
這篇文章給大家介紹了vue2.0父子組件及非父子組件之間的通信方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-01-01
這篇文章主要給大家介紹了Vuex和前端緩存的整合策略的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編一起來(lái)看看吧。2017-05-05