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ò)
點(diǎn)擊詳細(xì)信息，找到 IPv4地址，復(fù)制添加到pubilc后重新運(yùn)行后即可
方法二
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，再重新運(yùn)行項目，發(fā)現(xiàn)network有了ip+port。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue-router跳轉(zhuǎn)和location.href的區(qū)別及說明
Vue?Router是Vue.js官方的路由管理器,它允許我們通過定義路由來管理應(yīng)用程序的不同視圖和狀態(tài),Vue路由跳轉(zhuǎn)主要有以下幾種方式：<router-link>標(biāo)簽、this.$router.push方法、this.$router.replace方法和this.$router.go方法2025-01-01
Vue 3 onMounted 中控制同步與異步執(zhí)行策略的方案詳解
在Vue 3的onMounted鉤子中,控制多個函數(shù)的同步和異步執(zhí)行有多種方法,本文給大家分享Vue 3 onMounted 中控制同步與異步執(zhí)行策略的方案,感興趣的朋友跟隨小編一起看看吧2026-03-03
vue項目fetch本地PAG格式文件404 NotFound的解決
這篇文章主要介紹了vue項目fetch本地PAG格式文件404 NotFound的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue+element-ui+sortable.js實現(xiàn)表格拖拽功能
這篇文章主要為大家詳細(xì)介紹了vue+element-ui+sortable.js實現(xiàn)表格拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了如何使用yarn創(chuàng)建vite項目+vue3,詳細(xì)介紹了使用vite創(chuàng)建vue3過程,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
VuePress 靜態(tài)網(wǎng)站生成方法步驟
這篇文章主要介紹了VuePress 靜態(tài)網(wǎng)站生成方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
使用Vue3和ApexCharts實現(xiàn)交互式3D折線圖
ApexCharts 是一個功能強(qiáng)大的 JavaScript 庫,用于創(chuàng)建交互式、可定制的圖表,在 Vue.js 中,它可以通過 vue3-apexcharts 插件輕松集成,本文給大家介紹了使用Vue3和ApexCharts實現(xiàn)交互式3D折線圖,需要的朋友可以參考下2024-06-06
vue左右側(cè)聯(lián)動滾動的實現(xiàn)代碼
這篇文章主要介紹了vue左右側(cè)聯(lián)動滾動的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
下面小編就為大家分享一篇vue 頁面加載進(jìn)度條組件實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue CLI 3搭建vue+vuex最全分析(推薦)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09