Vite內(nèi)網(wǎng)ip訪問2種配置方式
更新時間：2023年07月27日 09:46:26 作者：前端蝸牛君
這篇文章主要給大家介紹了關(guān)于Vite內(nèi)網(wǎng)ip訪問的2種配置方式,文中通過實例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用Vite具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
問題
使用vite運行項目的時候，控制臺會只出現(xiàn)127.0.0.1（localhost）本地地址訪問項目。不可以通過公司內(nèi)網(wǎng)ip訪問，其他團隊成員無法訪問，這是因為沒有將服務(wù)暴露在局域網(wǎng)中:
兩種解決方式
方式一：修改vite的配置文件（vite.config.ts）添加 host: "0.0.0.0"
export default defineConfig({
plugins: [vue(), vueJsx()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url))
},
},
server: {
port: 9999,
host: "0.0.0.0"
},
});方式二：修改package.json文件
"scripts": {
"dev": "vite --host 0.0.0.0",
"build": "vite build",
"preview": "vite preview"
},結(jié)果
采用上面任一方式，就可以通過內(nèi)網(wǎng)地址訪問了：
補充知識：vite中使用局域網(wǎng)訪問項目
在運行vite項目后，發(fā)現(xiàn)只能本地訪問，不能局域網(wǎng)訪問，package.json如下
只需在package.json中加上以下內(nèi)容即可：
--host 0.0.0.0
重啟vite即可
總結(jié)
到此這篇關(guān)于Vite內(nèi)網(wǎng)ip訪問2種配置方式的文章就介紹到這了,更多相關(guān)Vite內(nèi)網(wǎng)ip訪問內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
Vue-cli創(chuàng)建項目從單頁面到多頁面的方法
本篇文章主要介紹了Vue-cli創(chuàng)建項目從單頁面到多頁面的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章，我們通過實現(xiàn)一個簡單版的和Vue中computed具有相同功能的函數(shù)來了解computed是如何工作的。對Vue.js中的computed工作原理感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-03-03
Vue 中使用虛擬 dom 且根據(jù) diff 算法進行新舊 DOM 對比，從而更新真實 dom ，key 是虛擬 DOM 對象的唯一標識, 在 diff 算法中 key 起著極其重要的作用，本文講解 key 的作用以及為什么最好不要使用 index 作為 key 的屬性值2021-11-11
vue源碼學(xué)習(xí)之Object.defineProperty對象屬性監(jiān)聽
這篇文章主要介紹了vue源碼學(xué)習(xí)之Object.defineProperty對象屬性監(jiān)聽，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
今天小編就為大家分享一篇關(guān)于vue-router傳參用法詳解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了vue?底部footer導(dǎo)航組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇vue 解決數(shù)組賦值無法渲染在頁面的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要為大家詳細介紹了vuex實現(xiàn)購物車的增加減少移除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
本篇文章主要介紹了vue動態(tài)生成dom并且自動綁定事件，具有一定的參考價值，有興趣的可以了解一下。2017-04-04
這篇文章主要介紹了Vue自定義指令的實現(xiàn)，Vue支持自定義指令，開發(fā)者可以根據(jù)自己的需求，創(chuàng)建自己的指令來擴展Vue的功能，需要詳細了解可以參考下文2023-05-05