1. 程式人生 > >解決vue-cli專案無法用本機IP訪問的問題

解決vue-cli專案無法用本機IP訪問的問題

所遇問題

啟動vue-cli專案服務,用本機IP無法訪問此網站,拒絕了我們的連結請求。從而無法從手機上預覽效果

原因分析

在我們的bulid目錄下有一個webpack.dev.config.js的配置檔案,發現devServer物件裡的host屬性取自process.env.HOST || config.dev.host。
這裡寫圖片描述
於是這裡我們去檢視config.dev.host。在我們的config目錄下有一個index.js, 找到dev物件的host屬性
這裡寫圖片描述
發現該版本的vue-cli將host主機名定義為localhost, 從而導致了本地IP不能訪問服務。

解決辦法

將host重新定義為:0.0.0.0即可, 然後重啟服務,發現localhost、127.0.0.1、本地IP均能正常訪問,這樣就可以用手機來預覽效果啦

host: '0.0.0.0'