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