vite(vue3)配置內(nèi)網(wǎng)ip訪問的方法步驟
本項(xiàng)目框架(vue3)： Vite + TS
如果沒有進(jìn)行配置，運(yùn)行項(xiàng)目之后，看到的訪問地址是本地訪問地址，其他人訪問不了。
如下：
如果想要其他人也可以訪問，需要設(shè)置內(nèi)網(wǎng) ip 訪問地址，設(shè)置方法如下：
一、配置 “ vite.config.ts ” 文件
在項(xiàng)目根目錄下的 “ vite.config.ts ” 文件 中，添加 serve 配置 “host: ‘0.0.0.0’ ”，即添加以下代碼：
server: {
host: '0.0.0.0'
},如圖所示：
添加 server 配置后保存 “ vite.config.ts ” 文件 ，并重新運(yùn)行項(xiàng)目- - - 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”，如下：
沒有修改時(shí)，" dev " 項(xiàng)配置如下：
"scripts": {
"dev": "vite",
}修改后:
"scripts": {
"dev": "vite --host 0.0.0.0",
}如圖所示：
保存后，重新運(yùn)行項(xiàng)目，如上方法一 一樣，會(huì)出現(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作
這篇文章主要介紹了vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue實(shí)戰(zhàn)之項(xiàng)目開發(fā)時(shí)常見的幾個(gè)錯(cuò)誤匯總
vue作為前端主流的3大框架之一,目前在國(guó)內(nèi)有著非常廣泛的應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)戰(zhàn)之項(xiàng)目開發(fā)時(shí)常見的幾個(gè)錯(cuò)誤匯總的相關(guān)資料,對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-03-03
在Vue中創(chuàng)建可重用的 Transition的方法
這篇文章主要介紹了在Vue中創(chuàng)建可重用的 Transition,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細(xì)介紹了vue原生方法自定義右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue3 攜帶參數(shù)跳轉(zhuǎn)|router傳參方式
這篇文章主要介紹了vue3 攜帶參數(shù)跳轉(zhuǎn)|router傳參方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue 簡(jiǎn)單實(shí)現(xiàn)前端權(quán)限控制的示例
這篇文章主要介紹了Vue 簡(jiǎn)單實(shí)現(xiàn)前端權(quán)限控制的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了vue3.0如何在全局掛載對(duì)象和方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中可以綁定多個(gè)事件嗎，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解Vue CLI 3.0腳手架如何mock數(shù)據(jù)
這篇文章主要介紹了詳解Vue CLI 3.0腳手架如何mock數(shù)據(jù)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要為大家詳細(xì)介紹了vue仿ios列表左劃刪除，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09