vue項目netWork地址無法訪問的問題及解決
更新時間：2023年09月26日 17:09:10 作者：episode33
這篇文章主要介紹了vue項目netWork地址無法訪問的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue項目netWork地址無法訪問
1.配置vue.config.js
devServer: {
host: "0.0.0.0",
public: "172.201.10.26:1888", // 此處是自己電腦IP地址！
port: 1888,
https: false,
disableHostCheck: true,
open: false, // 配置自動啟動瀏覽器
}2.修改host為“0.0.0.0”
public：改為本機ip地址
（1）本機ip查詢方法 win+R 后輸入cmd彈出命令行
（2）命令行中輸入ipconfig后回車，找到IPv4，復(fù)制地址
3.重新運行vue項目
如果出現(xiàn)網(wǎng)絡(luò)無法訪問狀態(tài)，請確認(rèn)配置端口號是否相同
vue項目通過network的ip地址訪問注意事項
在config.js文件中的dev中修改host為0.0.0.0
?devServer: { // 環(huán)境配置
? ? ? ? host: '0.0.0.0',
? ? ? ? port: 8080,
? ? ? ? https: false,
? ? ? ? hotOnly: false,
? ? ? ? disableHostCheck: true,
? ? ? ? open: false // 配置自動啟動瀏覽器
? ? },或者在package.json文件下"scripts"的"dev"后面加上–host 0.0.0.0"，如果沒有dev就找serve
"scripts": {
? ? "serve": "vue-cli-service serve --host 0.0.0.0",
? ? "build": "vue-cli-service build",
? ? "lint": "vue-cli-service lint"
? },設(shè)置完成之后就可以用ip+端口號的形式來訪問項目
在使用network進行局域網(wǎng)訪問時注意
- 局域網(wǎng)訪問訪問需要打開出站、入站規(guī)則
- 防火墻默認(rèn)打開，無法進行network的ip訪問，ip為本機在局域網(wǎng)中的地址
- 關(guān)閉防火墻（公用網(wǎng)絡(luò)）和安全軟件即可
設(shè)置完成即可使用其它設(shè)備在同一局域網(wǎng)下進行訪問了
注意：
如果更換了網(wǎng)絡(luò)狀態(tài)，ip地址就會發(fā)生改變，就不能用舊的ip地址訪問，要使用新ip來訪問項目
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue實現(xiàn)小購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了vue 實現(xiàn)走馬燈效果，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue+echarts+datav大屏數(shù)據(jù)展示及實現(xiàn)中國地圖省市縣下鉆功能
這篇文章主要介紹了vue+echarts+datav大屏數(shù)據(jù)展示及實現(xiàn)中國地圖省市縣下鉆,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11
Vue實現(xiàn)登錄保存token并校驗實現(xiàn)保存登錄狀態(tài)的操作代碼
這篇文章主要介紹了Vue實現(xiàn)登錄保存token并校驗實現(xiàn)保存登錄狀態(tài),本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-02-02
vue3 element-plus二次封裝組件系列之伸縮菜單制作
這篇文章主要介紹了vue3 element-plus二次封裝組件系列之伸縮菜單制作,是基于vue3 vite element-plus搭建的，值的注意的時候，里面的圖標(biāo)組件是經(jīng)過處理的，結(jié)合實例代碼介紹的非常詳細，需要的朋友可以參考下2023-01-01
Vue3項目中多頁面路由配置與Pinia狀態(tài)管理的完全指南
本文詳細介紹了Vue3多頁面應(yīng)用開發(fā)中VueRouter4的配置和使用方法,包括首頁、列表頁、詳情頁的頁面導(dǎo)航與參數(shù)傳遞,并展示了Pinia狀態(tài)管理與用戶登錄狀態(tài)、用戶信息管理的實現(xiàn)方法,需要的朋友可以參考下2026-04-04
Vue使用vxe-table實現(xiàn)數(shù)據(jù)分組統(tǒng)計與表尾合計
在數(shù)據(jù)報表或管理系統(tǒng)中,經(jīng)常需要按某個字段對數(shù)據(jù)進行分組,并計算每組的統(tǒng)計值（如求和、平均值）,本文將通過一個完整的示例,演示如何使用vxe-table實現(xiàn)數(shù)據(jù)分組統(tǒng)計與表尾合計,有需要的小伙伴可以了解下2026-06-06
vue最強table vxe-table 虛擬滾動列表 前端導(dǎo)出問題分析
最近遇到個問題,后臺一次性返回2萬條列表數(shù)據(jù)并且需求要求所有數(shù)據(jù)必須全部展示,不能做假分頁,怎么操作呢,下面通過本文介紹下vue最強table vxe-table 虛擬滾動列表 前端導(dǎo)出問題,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了Vertx基于EventBus發(fā)送接受自定義對象,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
Vue中this.$router.push參數(shù)獲取方法
下面小編就為大家分享一篇Vue中this.$router.push參數(shù)獲取方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02