vite(vue3)配置內(nèi)網(wǎng)ip訪問的方法步驟
本項目框架(vue3)： Vite + TS
如果沒有進行配置，運行項目之后，看到的訪問地址是本地訪問地址，其他人訪問不了。
如下：
如果想要其他人也可以訪問，需要設置內(nèi)網(wǎng) ip 訪問地址，設置方法如下：
一、配置 “ vite.config.ts ” 文件
在項目根目錄下的 “ vite.config.ts ” 文件 中，添加 serve 配置 “host: ‘0.0.0.0’ ”，即添加以下代碼：
server: {
host: '0.0.0.0'
},如圖所示：
添加 server 配置后保存 “ vite.config.ts ” 文件 ，并重新運行項目- - - npm run dev
可以看到 本地localhost訪問地址 + 內(nèi)網(wǎng)訪問地址，這兩種方式的訪問地址，如下：
這樣，通過 下面 “ Network ” 內(nèi)網(wǎng)地址，其他也可以訪問該網(wǎng)頁了
二、配置 “ package.json ” 文件
在 “ package.json ” 文件中，修改 “ dev ” 配置，添加 “ --host 0.0.0.0”，如下：
沒有修改時，" dev " 項配置如下：
"scripts": {
"dev": "vite",
}修改后:
"scripts": {
"dev": "vite --host 0.0.0.0",
}如圖所示：
保存后，重新運行項目，如上方法一 一樣，會出現(xiàn)本地和內(nèi)網(wǎng)兩種形式訪問地址。
設置內(nèi)網(wǎng)ip訪問后其他人無法訪問：可能是防火墻沒關閉
找到網(wǎng)絡 --》鼠標右鍵，選中“屬性” --》“ Windows Defender 防火墻” --》 “ 啟用或關閉 Windows Defender 防火墻” --》 選中 “關閉 Windows Defender防火墻” --》 “確定”，保存設置
然后重新訪問 內(nèi)網(wǎng) ip 地址，應該就可以訪問了。
如圖所示：
總結
到此這篇關于vite(vue3)配置內(nèi)網(wǎng)ip訪問的方法步驟的文章就介紹到這了,更多相關vite配置內(nèi)網(wǎng)ip訪問內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了關于vue中的時間格式轉化問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
通過實例解析vuejs如何實現(xiàn)調(diào)試代碼
這篇文章主要介紹了通過實例解析vuejs如何實現(xiàn)調(diào)試代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了VUE實現(xiàn)自身整體組件銷毀的示例代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
vite官方文檔中有關于多頁面應用模式如果配置的說明,下面這篇文章主要給大家介紹了關于vite多頁面配置的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
reactive用來包裝一個對象，使其每個對象屬性都具有響應性（也就是深層次響應式），這篇文章主要介紹了vue3.2?reactive函數(shù)注意點及問題小結,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue實現(xiàn)錄制屏幕功能并本地保存,這里用的是用的是HBuilder?X開發(fā)，結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-04-04
這篇文章主要介紹了vue-cli3中配置alias和打包加hash值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue3.0使用axios報錯問題記錄,vue-cli3.0安裝插件的時候要注意區(qū)分vue-cli2.0的命令，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue如何實現(xiàn)Toast輕提示，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vuex中store存儲store.commit和store.dispatch的用法
這篇文章主要介紹了vuex中store存儲store.commit和store.dispatch的用法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07