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地址。
訪問本地項目
當(dāng)你成功執(zhí)行上一步，確定你們處于同一局域網(wǎng)下后：在你的項目中找到config文件夾，找到index.js文件，你可以看到host:localhost(默認(rèn))，將localhost改成本機ip地址（放vue項目的那臺電腦的ip地址，如不知道本機ip地址，可參考上一步）
保存后重新運行該項目，生成的新的訪問地址就是處于同一局域網(wǎng)下都可訪問該項目的地址。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了element中drawer模板的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要為大家詳細(xì)介紹了vuejs移動端實現(xiàn)div拖拽移動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家詳細(xì)介紹了Vue.js組件通信之自定義事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
如何正確解決VuePress本地訪問出現(xiàn)資源報錯404的問題
這篇文章主要介紹了如何正確解決VuePress本地訪問出現(xiàn)資源報錯404的問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了vue實現(xiàn)商品加減計算總價的實例代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
下面小編就為大家分享一篇解決vue頁面DOM操作不生效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了vue3封裝側(cè)導(dǎo)航文字骨架效果組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vue3+Canvas實現(xiàn)坦克大戰(zhàn)游戲(二)
本文主要給大家講解一下子彈擊中物體、物體銷毀、敵方坦克構(gòu)建生成、運動算法、爆炸效果、以及障礙物的生成，感興趣的小伙伴可以了解一下2022-03-03
vue3+vite 動態(tài)引用靜態(tài)資源及動態(tài)引入assets文件夾圖片的多種方式
通過require動態(tài)引入, 發(fā)現(xiàn)報錯：require is not defind,這是因為 require 是屬于 Webpack 的方法,本文給大家介紹vue3+vite 動態(tài)引用靜態(tài)資源及動態(tài)引入assets文件夾圖片的多種方式,感興趣的朋友一起看看吧2023-10-10
本篇文章主要介紹了VUE開發(fā)一個圖片輪播的組件示例代碼，對圖片輪播效果感興趣的小伙伴們可以參考一下。2017-03-03