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