Vue項(xiàng)目配置在局域網(wǎng)下訪問(wèn)方式
Vue項(xiàng)目配置在局域網(wǎng)下訪問(wèn)
1.vue配置
a.vue cli2.0配置如下
b.vue cli3.0不需要配置即可訪問(wèn)
2.如果上述配置無(wú)法訪問(wèn)則配置以下
需要配置一下電腦的防火墻，把所需的端口（如：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ī)訪問(wèn)電腦 IP 加端口號(hào)，192.168.1.11:8080 就可以打開項(xiàng)目了。
注意：手機(jī)和電腦必須在同一局域網(wǎng)下才能訪問(wèn)，同事電腦同理
獲取IP 方法：
打開命令提示行工具，輸入 ipconfig 回車, 就可以看到自己的IP了，比如我的 192.168.2.103 。
這樣更加方便真機(jī)調(diào)試，無(wú)需部署到服務(wù)器就可以進(jìn)行訪問(wèn)和測(cè)試。
同一局域網(wǎng)下訪問(wèn)vue項(xiàng)目
同一局域網(wǎng)
在你的電腦上用快捷鍵windows + R打開cmd，使用ping + ip地址（想要訪問(wèn)你項(xiàng)目的那臺(tái)電腦的ip地址），如果成功后就表示你們處于同一局域網(wǎng)下。
本機(jī)ip地址
在你的電腦上用快捷鍵windows + R打開cmd，使用ipconfig命令，就可以看到本機(jī)ip地址。
訪問(wèn)本地項(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èn)地址就是處于同一局域網(wǎng)下都可訪問(wèn)該項(xiàng)目的地址。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
element中drawer模板的實(shí)現(xiàn)
本文主要介紹了element中drawer模板的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vuejs移動(dòng)端實(shí)現(xiàn)div拖拽移動(dòng)
這篇文章主要為大家詳細(xì)介紹了vuejs移動(dòng)端實(shí)現(xiàn)div拖拽移動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家詳細(xì)介紹了Vue.js組件通信之自定義事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
如何正確解決VuePress本地訪問(wèn)出現(xiàn)資源報(bào)錯(cuò)404的問(wèn)題
這篇文章主要介紹了如何正確解決VuePress本地訪問(wèn)出現(xiàn)資源報(bào)錯(cuò)404的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue實(shí)現(xiàn)商品加減計(jì)算總價(jià)的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)商品加減計(jì)算總價(jià)的實(shí)例代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
下面小編就為大家分享一篇解決vue頁(yè)面DOM操作不生效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了vue3封裝側(cè)導(dǎo)航文字骨架效果組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue3+Canvas實(shí)現(xiàn)坦克大戰(zhàn)游戲(二)
本文主要給大家講解一下子彈擊中物體、物體銷毀、敵方坦克構(gòu)建生成、運(yùn)動(dòng)算法、爆炸效果、以及障礙物的生成，感興趣的小伙伴可以了解一下2022-03-03
vue3+vite 動(dòng)態(tài)引用靜態(tài)資源及動(dòng)態(tài)引入assets文件夾圖片的多種方式
通過(guò)require動(dòng)態(tài)引入, 發(fā)現(xiàn)報(bào)錯(cuò)：require is not defind,這是因?yàn)?nbsp;require 是屬于 Webpack 的方法,本文給大家介紹vue3+vite 動(dòng)態(tài)引用靜態(tài)資源及動(dòng)態(tài)引入assets文件夾圖片的多種方式,感興趣的朋友一起看看吧2023-10-10
本篇文章主要介紹了VUE開發(fā)一個(gè)圖片輪播的組件示例代碼，對(duì)圖片輪播效果感興趣的小伙伴們可以參考一下。2017-03-03