vue項(xiàng)目netWork地址無法訪問的問題及解決
更新時(shí)間：2023年09月26日 17:09:10 作者：episode33
這篇文章主要介紹了vue項(xiàng)目netWork地址無法訪問的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue項(xiàng)目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, // 配置自動(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ò)無法訪問狀態(tài)，請(qǐng)確認(rèn)配置端口號(hào)是否相同
vue項(xiàng)目通過network的ip地址訪問注意事項(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"，如果沒有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)的形式來訪問項(xiàng)目
在使用network進(jìn)行局域網(wǎng)訪問時(shí)注意
- 局域網(wǎng)訪問訪問需要打開出站、入站規(guī)則
- 防火墻默認(rèn)打開，無法進(jìn)行network的ip訪問，ip為本機(jī)在局域網(wǎng)中的地址
- 關(guān)閉防火墻（公用網(wǎng)絡(luò)）和安全軟件即可
設(shè)置完成即可使用其它設(shè)備在同一局域網(wǎng)下進(jìn)行訪問了
注意：
如果更換了網(wǎng)絡(luò)狀態(tài)，ip地址就會(huì)發(fā)生改變，就不能用舊的ip地址訪問，要使用新ip來訪問項(xiàng)目
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
element-ui tooltip修改背景顏色和箭頭顏色的實(shí)現(xiàn)
這篇文章主要介紹了element-ui tooltip修改背景顏色和箭頭顏色的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
webpack + vue 打包生成公共配置文件（域名） 方便動(dòng)態(tài)修改
這篇文章主要介紹了webpack + vue 打包生成公共配置文件（域名） 方便動(dòng)態(tài)修改,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
本文將詳細(xì)介紹jQuery代碼優(yōu)化的9種方法,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了Vue聲明式渲染詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了vue數(shù)組去重的12種方法示例全面詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
在Vue3中,公共組件的main.js文件扮演著非常重要的角色,它的作用主要體現(xiàn)在：注冊(cè)全局組件、引入公共樣式、引入Vue、引入組件、創(chuàng)建Vue實(shí)例、掛載實(shí)例,本文將圍繞Vue3公共組件的main.js文件進(jìn)行詳細(xì)的闡述,包括其作用、常用代碼等方面2023-08-08
vue在解析我們的組件時(shí)， 是通過打包成一個(gè) js 文件，當(dāng)我們的一個(gè)組件 引入過多子組件是，頁面的首屏加載時(shí)間 由最后一個(gè)組件決定 優(yōu)化的一種方式就是采用異步組件，這篇文章主要介紹了Vue3 異步組件 suspense,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了VUE3子表格嵌套分頁查詢互相干擾的問題解決方案,如果不需要做子表格的分頁查詢，那么可以直接在主表格中嵌套子表格，本文給大家介紹兩種方式，需要的朋友可以參考下2024-01-01
vue移動(dòng)端實(shí)現(xiàn)左滑編輯與刪除的全過程
vue.js是現(xiàn)在流行的js框架之一,vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式j(luò)avascript框架，這篇文章主要給大家介紹了關(guān)于vue移動(dòng)端實(shí)現(xiàn)左滑編輯與刪除的相關(guān)資料,需要的朋友可以參考下2021-05-05
這篇文章主要為大家詳細(xì)介紹了vue3使用全局websocket的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),對(duì)我們深入學(xué)習(xí)vue3有一定的幫助,感興趣的小伙伴可以參考一下2023-10-10