快捷導(dǎo)航

vue運(yùn)行項(xiàng)目時(shí)network顯示unavailable的問(wèn)題及解決

更新時(shí)間：2022年09月15日 15:04:06 作者：Yogic

這篇文章主要介紹了vue運(yùn)行項(xiàng)目時(shí)network顯示unavailable的問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue運(yùn)行項(xiàng)目時(shí)network顯示unavailable

vue-cli了一個(gè)項(xiàng)目，create以后，npm run serve時(shí)最終只有本地可以打開(kāi)，但是網(wǎng)絡(luò)上沒(méi)有顯示，network顯示unavailable

一開(kāi)始也是不知道什么原因，查了很舊，沒(méi)辦法了，繼續(xù)試了下，最終發(fā)現(xiàn)原來(lái)是網(wǎng)卡原因（禁用網(wǎng)絡(luò)和共享中心的除正在連接網(wǎng)路以外的其他網(wǎng)絡(luò)）

刪除多余無(wú)用網(wǎng)卡，只留唯一現(xiàn)在接入網(wǎng)路的網(wǎng)卡，發(fā)現(xiàn)netwoek妥妥的起來(lái)

深究發(fā)現(xiàn)，vue等在本地啟動(dòng)服務(wù)之前，會(huì)先解析本地IP地址，類(lèi)似cmd中ipconfig，ip地址取ipv4的值填充network的ip，所以至此就要保證，本地的網(wǎng)卡唯一性，即使是無(wú)連接的網(wǎng)卡，也得禁用，保證有效連接網(wǎng)路唯一性

node運(yùn)行項(xiàng)目-Network: unavailable-沒(méi)有ip地址

vscode運(yùn)行vue項(xiàng)目后發(fā)現(xiàn)Network: unavailable 是什么情況呢？

可能有一下三種情況：

1.多個(gè)網(wǎng)卡原因：打開(kāi)網(wǎng)絡(luò)共享中心，把多余的網(wǎng)絡(luò)禁用掉，只留一個(gè)

2.在中配置host及public

3.系統(tǒng)環(huán)境變量問(wèn)題

方式一：項(xiàng)目文件vue.config.js文件中配置

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 // 配置自動(dòng)啟動(dòng)瀏覽器
    }
}

方式二：系統(tǒng)環(huán)境變量配置問(wèn)題

計(jì)算機(jī)右鍵--屬性--高級(jí)系統(tǒng)設(shè)置--環(huán)境變量

C:\Windows\system32C:\WindowsC:\Windows\System32\Wbem

注：

配完環(huán)境變量再重啟vscode，再重新運(yùn)行項(xiàng)目，發(fā)現(xiàn)network有了ip+port。

tips：WBEM是管理協(xié)議和網(wǎng)絡(luò)標(biāo)準(zhǔn)技術(shù)的一項(xiàng)業(yè)界倡議，這個(gè)程序?qū)δ阆到y(tǒng)的正常運(yùn)行是非常重要的，不能刪，刪了就會(huì)導(dǎo)致系統(tǒng)網(wǎng)絡(luò)的一些問(wèn)題，其中就有上面的network：unavailable的出現(xiàn)

修復(fù)完成

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue.js中讓人容易忽略的API詳解
Vue.js是構(gòu)建Web界面的漸進(jìn)式JavaScript框架,通過(guò)簡(jiǎn)潔的 API 提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng),這篇文章主要給大家介紹了關(guān)于Vue.js中讓人容易忽略的API的相關(guān)資料,需要的朋友可以參考下
2021-09-09
vue3的父?jìng)髯訂?wèn)題(單項(xiàng)數(shù)據(jù)流)
這篇文章主要介紹了vue3的父?jìng)髯訂?wèn)題(單項(xiàng)數(shù)據(jù)流)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue指令只能輸入正數(shù)并且只能輸入一個(gè)小數(shù)點(diǎn)的方法
這篇文章主要介紹了vue指令只能輸入正數(shù)并且只能輸入一個(gè)小數(shù)點(diǎn)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
Vue頁(yè)面中播放音頻文件的方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)頁(yè)面中播放音頻文件的相關(guān)方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-02-02
Element中使用ECharts的項(xiàng)目實(shí)踐
本文主要介紹了Element中使用ECharts的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
基于Vue3實(shí)現(xiàn)數(shù)字華容道游戲的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue編寫(xiě)一個(gè)數(shù)字華容道游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
利用vue + element實(shí)現(xiàn)表格分頁(yè)和前端搜索的方法
眾所周知Element 是一套 Vue.js 后臺(tái)組件庫(kù)，它能夠幫助你更輕松更快速地開(kāi)發(fā)后臺(tái)項(xiàng)目。下面這篇文章主要給大家介紹了關(guān)于利用vue + element實(shí)現(xiàn)表格分頁(yè)和前端搜索的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-12-12
VUE中常用的4種高級(jí)方法
provide/inject 是 Vue.js 中用于跨組件傳遞數(shù)據(jù)的一種高級(jí)技術(shù)，它可以將數(shù)據(jù)注入到一個(gè)組件中，然后讓它的所有子孫組件都可以訪問(wèn)到這個(gè)數(shù)據(jù)，這篇文章主要介紹了VUE中常用的4種高級(jí)方法,需要的朋友可以參考下
2023-05-05
vue使用localStorage保存登錄信息適用于移動(dòng)端、PC端
這篇文章主要為大家詳細(xì)介紹了vue使用localStorage保存登錄信息適用于移動(dòng)端、PC端，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-05-05
vue 刷新之后嵌套路由不變重新渲染頁(yè)面的方法
今天小編就為大家分享一篇vue 刷新之后嵌套路由不變重新渲染頁(yè)面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09