Vue項(xiàng)目配置在局域網(wǎng)下訪問方式
Vue項(xiàng)目配置在局域網(wǎng)下訪問
1.vue配置
a.vue cli2.0配置如下
b.vue cli3.0不需要配置即可訪問
2.如果上述配置無法訪問則配置以下
需要配置一下電腦的防火墻，把所需的端口（如：8080）打開。
設(shè)置方法如下：
2.1 Windows 10 ，搜索“控制面板”，打開，Windows 7 可以直接在開始菜單打開。
2.2 點(diǎn)擊“Windows Defender防火墻”——“高級(jí)設(shè)置”——新建“入網(wǎng)規(guī)則”。
2.3 規(guī)則類型選擇“端口”
2.4 下一步“特定本地端口”填 8080-8088 （此處是一個(gè) IP 段，因?yàn)槿绻蜷_多個(gè)項(xiàng)目，端口會(huì)被占用， Vue會(huì)自動(dòng)分配一個(gè)新的端口。如：8081 ）。
2.5下一步“允許連接”
2.6下一步選擇開放的場(chǎng)景，注意一定要選前兩個(gè)
2.7下一步輸入規(guī)則名稱，點(diǎn)擊“完成”即可
這樣用手機(jī)訪問電腦 IP 加端口號(hào)，192.168.1.11:8080 就可以打開項(xiàng)目了。
注意：手機(jī)和電腦必須在同一局域網(wǎng)下才能訪問，同事電腦同理
獲取IP 方法：
打開命令提示行工具，輸入 ipconfig 回車, 就可以看到自己的IP了，比如我的 192.168.2.103 。
這樣更加方便真機(jī)調(diào)試，無需部署到服務(wù)器就可以進(jìn)行訪問和測(cè)試。
同一局域網(wǎng)下訪問vue項(xiàng)目
同一局域網(wǎng)
在你的電腦上用快捷鍵windows + R打開cmd，使用ping + ip地址（想要訪問你項(xiàng)目的那臺(tái)電腦的ip地址），如果成功后就表示你們處于同一局域網(wǎng)下。
本機(jī)ip地址
在你的電腦上用快捷鍵windows + R打開cmd，使用ipconfig命令，就可以看到本機(jī)ip地址。
訪問本地項(xiàng)目
當(dāng)你成功執(zhí)行上一步，確定你們處于同一局域網(wǎng)下后：在你的項(xiàng)目中找到config文件夾，找到index.js文件，你可以看到host:localhost(默認(rèn))，將localhost改成本機(jī)ip地址（放vue項(xiàng)目的那臺(tái)電腦的ip地址，如不知道本機(jī)ip地址，可參考上一步）
保存后重新運(yùn)行該項(xiàng)目，生成的新的訪問地址就是處于同一局域網(wǎng)下都可訪問該項(xiàng)目的地址。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在vue中nextTick用法及nextTick 的原理是什么
這篇文章主要介紹了在vue中nextTick用法及nextTick 的原理是什么,Vue.js 是一個(gè)流行的前端框架，它提供了一種響應(yīng)式的數(shù)據(jù)綁定機(jī)制，使得頁面的數(shù)據(jù)與頁面的 UI 組件之間能夠自動(dòng)同步，需要的朋友可以參考下2023-04-04
Vue利用draggable實(shí)現(xiàn)多選拖拽效果
這篇文章主要為大家詳細(xì)介紹了如何利用vue中的draggable插件實(shí)現(xiàn)多選拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
Vue自定義Hook實(shí)現(xiàn)簡(jiǎn)化本地存儲(chǔ)
這篇文章主要為大家詳細(xì)介紹了如何通過使用 Vue 3 的 Composition API 創(chuàng)建一個(gè)強(qiáng)大而靈活的自定義 Hook,簡(jiǎn)化了在 localStorage 或 sessionStorage 中管理數(shù)據(jù)的流程,需要的可以參考下2023-12-12
今天小編就為大家分享一篇在Vue組件中獲取全局的點(diǎn)擊事件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本文主要介紹了淺談Vue灰度發(fā)布新功能的使用，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
本篇文章主要介紹了vue+iview寫個(gè)彈框的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
本文章向大家介紹vue組件中的數(shù)據(jù)共享，主要包括vue組件中的數(shù)據(jù)共享使用實(shí)例、應(yīng)用技巧、基本知識(shí)點(diǎn)總結(jié)和需要注意事項(xiàng)，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)勻速輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家介紹了VueJs中customRef函數(shù)使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
Element Plus是為適配Vue3而對(duì)Element UI進(jìn)行重構(gòu)后產(chǎn)生的前端組件庫,包含豐富的基礎(chǔ)組件,下面這篇文章主要給大家介紹了關(guān)于vue3引入Element-plus的相關(guān)資料,需要的朋友可以參考下2022-04-04