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