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