vue項目Network: unavailable的問題及解決
更新時間：2023年09月26日 16:53:53 作者：Lucy-
這篇文章主要介紹了vue項目Network: unavailable的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue項目Network: unavailable問題
vue項目npm run serve 后，只有l(wèi)ocalhost訪問，network不能訪問，
可能有三種情況：
- 多個網(wǎng)卡原因：打開網(wǎng)絡(luò)共享中心，把多余的網(wǎng)絡(luò)禁用掉，只留一個
- 在中配置host及public
- 系統(tǒng)環(huán)境變量問題
由于這個Network是被寫死進(jìn)文件中的，所以如果網(wǎng)絡(luò)被切換了，記得修改ip地址，確保與當(dāng)前的聯(lián)網(wǎng)ip一致
解決辦法1：項目文件vue.config.js文件中配置
在vue項目根目錄下找到或創(chuàng)建 vue.config.js 文件
在devServer配置里面添加public，如下代碼所示。
public:‘192.168.1.2:8080’,
module.exports = {
configureWebpack: {},
devServer: { // 環(huán)境配置
host: '0.0.0.0',
public: '192.168.1.2:8080', // 此處是自己電腦IP地址！
port: '8080',
https: false,
disableHostCheck: true,
open: false // 配置自動啟動瀏覽器
}
}那么，如何看public后的自己電腦IP地址？
方法一
打開 控制面板\所有控制面板項\網(wǎng)絡(luò)和共享中心
在網(wǎng)絡(luò)連接窗口中雙擊打開正在使用的網(wǎng)絡(luò)
點擊詳細(xì)信息，找到 IPv4地址，復(fù)制添加到pubilc后重新運行后即可
方法二
win+R 輸入cmd進(jìn)入控制臺，輸入 ipconfig 查看
解決辦法2：系統(tǒng)環(huán)境變量配置
計算機(jī)右鍵--屬性--高級系統(tǒng)設(shè)置--環(huán)境變量
C:\Windows\system32C:\WindowsC:\Windows\System32\Wbem
配完環(huán)境變量再重啟vscode，再重新運行項目，發(fā)現(xiàn)network有了ip+port。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
緩存清除成為克服瀏覽器緩存中過時內(nèi)容挑戰(zhàn)的關(guān)鍵技術(shù),術(shù)語“緩存清除”是指故意使靜態(tài)資源失效或進(jìn)行版本控制,迫使瀏覽器在發(fā)生更改時獲取新資源,本文給大家介紹了Vue如何清除緩存,需要的朋友可以參考下2023-12-12
本篇文章主要介紹了Vue使用mixins實現(xiàn)壓縮圖片代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue下拉刷新組件的開發(fā)及slot的使用詳解,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
詳解VueJS 數(shù)據(jù)驅(qū)動和依賴追蹤分析
這篇文章主要介紹了詳解VueJS 數(shù)據(jù)驅(qū)動和依賴追蹤分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
Vue router傳遞參數(shù)并解決刷新頁面參數(shù)丟失問題
這篇文章主要介紹了Vue router傳遞參數(shù)并解決刷新頁面參數(shù)丟失問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了詳解vue的diff算法原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了vue中@路徑無法跳轉(zhuǎn)到指定文件的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue3 響應(yīng)式 API 及 reactive 和 ref&
響應(yīng)式是一種允許以聲明式的方式去適應(yīng)變化的編程范例，這篇文章主要介紹了關(guān)于Vue3響應(yīng)式API及reactive和ref的用法,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue-cli3.X使用px2rem遇到的問題及解決方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了Vuex入門之Module使用詳解,由于使用單一狀態(tài)樹,應(yīng)用的所有狀態(tài)會集中到一個比較大的對象,當(dāng)應(yīng)用變得非常復(fù)雜時,store?對象就有可能變得相當(dāng)臃腫,需要的朋友可以參考下2023-11-11