vue項(xiàng)目如何實(shí)現(xiàn)ip和localhost同時(shí)訪問
vue實(shí)現(xiàn)ip和localhost同時(shí)訪問
因?yàn)閘ocalhost只能在本機(jī)訪問，如果想其他電腦訪問或者是移動(dòng)端訪問需要采用ip來(lái)訪問 實(shí)現(xiàn)效果
1.在webpack.dev.conf.js里面配置messages字段
messages: [
`App runing at: `,
`Local: http://localhost:${port}`,
`Network: http://${require('ip').address()}:${port}`,
],
2.其他配置
（1）在package.json配置
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
（2）在config/index.js里面配置host字段
host: '0.0.0.0', // can be overwritten by process.env.HOST
注意：在第二步只需要配置（1）或者（2）不需要全部配置，踩坑
vue使用localhost和新ip地址訪問項(xiàng)目
問題描述
項(xiàng)目在本地上啟動(dòng)，想被其他電腦訪問
原本只要連接局域網(wǎng)輸入地址就可以，但是現(xiàn)在連接網(wǎng)線都實(shí)現(xiàn)不了
查過很多關(guān)于ip連接不顯示的資料，都不行
結(jié)果查到的是自己的vue項(xiàng)目問題，更改有效
解決辦法：更改三個(gè)文件（我只改了兩個(gè)就行）
1、config->index.js
將dev下的host對(duì)應(yīng)數(shù)據(jù)改成：'0.0.0.0'
(后端哥哥說(shuō)0.0.0.0代表時(shí)刻變動(dòng)的本機(jī)ip，你也可以直接改成不變的本機(jī)ip，比如我可以改成192.168.0.179，以下所有的都是這樣)
2、package.json
把dev對(duì)應(yīng)的數(shù)據(jù)后面加上： --host 0.0.0.0
3、build->webpack.dev.conf.js（我不用改，我本來(lái)就是動(dòng)態(tài)的）
host對(duì)應(yīng)數(shù)據(jù)改成：'0.0.0.0'
至此我的項(xiàng)目就可以運(yùn)行以后使用本機(jī)ip查看啦：
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue如何在頁(yè)面刷新時(shí)進(jìn)行重定向
這篇文章主要為大家詳細(xì)介紹了Vue如何在頁(yè)面刷新時(shí)進(jìn)行重定向,文中的示例代碼簡(jiǎn)潔易懂,具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2025-01-01
vue-router兩種模式區(qū)別及使用注意事項(xiàng)詳解
這篇文章主要介紹了vue-router兩種模式區(qū)別及使用注意事項(xiàng),結(jié)合實(shí)例形式詳細(xì)分析了vue-router兩種模式hash模式與history模式的區(qū)別、用法與操作注意事項(xiàng),需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細(xì)介紹了如何利用vue實(shí)現(xiàn)簡(jiǎn)單的瀑布流布局,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2023-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)記事本功能，記事本可以進(jìn)行添加刪除事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要介紹了 解決Vue打包后訪問圖片/圖標(biāo)不顯示的問題，本文給大家介紹的非常詳細(xì)，具有一定的參考解決價(jià)值,需要的朋友可以參考下2019-07-07
微信內(nèi)置開發(fā) iOS修改鍵盤換行為搜索的解決方案
今天小編就為大家分享一篇微信內(nèi)置開發(fā) iOS修改鍵盤換行為搜索的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-11-11
這篇文章主要介紹了vue3.0封裝輪播圖組件的步驟，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
Vue?Router?實(shí)現(xiàn)登錄后跳轉(zhuǎn)到之前想要訪問的頁(yè)面
這篇文章主要介紹了Vue?Router?實(shí)現(xiàn)登錄后跳轉(zhuǎn)到之前相要訪問的頁(yè)面,本文僅演示路由跳轉(zhuǎn)和導(dǎo)航守衛(wèi)相關(guān)代碼的實(shí)現(xiàn)，不包含具體的權(quán)限驗(yàn)證和登錄請(qǐng)求，需要的朋友可以參考下2022-12-12
前端Vue3實(shí)現(xiàn)圖片標(biāo)點(diǎn)兩種方式總結(jié)
這篇文章主要介紹了如何使用Vue3和Ant?Design?Vue4.x實(shí)現(xiàn)圖像標(biāo)點(diǎn)和質(zhì)量檢測(cè)功能,文章詳細(xì)描述了兩種方式,每種方式都包括前端顯示代碼、配置基本數(shù)據(jù)、繪制圓點(diǎn)和序號(hào)以及處理圖片點(diǎn)擊的步驟,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了Vue使用echarts可視化組件的方法,本文通過實(shí)例代碼案例給大家詳細(xì)介紹，需要的朋友可以參考下2021-07-07