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