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)文章
這篇文章主要介紹了在pycharm中開(kāi)發(fā)vue的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了vue如何自定義按鈕單選和多選問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue項(xiàng)目實(shí)現(xiàn)簡(jiǎn)單的權(quán)限控制管理功能
這篇文章主要介紹了Vue項(xiàng)目實(shí)現(xiàn)簡(jiǎn)單的權(quán)限控制功能，文中給大家介紹了兩種方式進(jìn)行權(quán)限限制，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-07-07
VUE前端導(dǎo)出文件之file-saver插件安裝使用教程
這篇文章主要給大家介紹了關(guān)于VUE前端導(dǎo)出文件之file-saver插件安裝使用的相關(guān)資料,file-saver是一個(gè)用于保存文件的JavaScript庫(kù),它提供了一種簡(jiǎn)單的方式來(lái)生成和保存文件,支持各種文件類型,例如文本文件、圖片、PDF等,需要的朋友可以參考下2024-05-05
本文內(nèi)容主要參考官方教程，為了方便理解，用更加通俗的文字講解Vuex，也原文內(nèi)容做一些重點(diǎn)引用。希望會(huì)對(duì)你有所幫助。2017-07-07
vue3通過(guò)組合鍵實(shí)現(xiàn)換行操作的示例詳解
這篇文章主要為大家詳細(xì)介紹了vue3如何通過(guò)組合鍵,例如command+Enter、shift+Enter、alt + Enter,實(shí)現(xiàn)換行操作,感興趣的可以了解下2024-03-03
vue3中使用viewerjs實(shí)現(xiàn)圖片預(yù)覽效果的項(xiàng)目實(shí)踐
viewer.js是一款開(kāi)源的圖片預(yù)覽插件,功能十分強(qiáng)大,本文主要介紹了vue3中使用viewerjs實(shí)現(xiàn)圖片預(yù)覽效果的項(xiàng)目實(shí)踐,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
Vue的elementUI實(shí)現(xiàn)自定義主題方法
下面小編就為大家分享一篇Vue的elementUI實(shí)現(xiàn)自定義主題方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue過(guò)渡和animate.css結(jié)合使用詳解
本篇文章主要介紹了vue過(guò)渡和animate.css結(jié)合使用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
vue項(xiàng)目中公用footer組件底部位置的適配問(wèn)題
footer為公用組件，其他頁(yè)面都需要引入。接下來(lái)通過(guò)本文給大家分享vue項(xiàng)目中公用footer組件底部位置的適配問(wèn)題,需要的朋友可以參考下2018-05-05