Vue項(xiàng)目通過(guò)network的ip地址訪問(wèn)注意事項(xiàng)及說(shuō)明

更新時(shí)間：2022年09月05日 14:13:42 作者：Tangctt

這篇文章主要介紹了Vue項(xiàng)目通過(guò)network的ip地址訪問(wèn)注意事項(xiàng)及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue通過(guò)network的ip地址訪問(wèn)

在config.js文件中的dev中修改host為0.0.0.0

?devServer: { // 環(huán)境配置
? ? ? ? host: '0.0.0.0',
? ? ? ? port: 8080,
? ? ? ? https: false,
? ? ? ? hotOnly: false,
? ? ? ? disableHostCheck: true,
? ? ? ? open: false // 配置自動(dòng)啟動(dòng)瀏覽器
? ? },

或者在package.json文件下"scripts"的"dev"后面加上–host 0.0.0.0"，如果沒有dev就找serve

"scripts": {
? ? "serve": "vue-cli-service serve --host 0.0.0.0",
? ? "build": "vue-cli-service build",
? ? "lint": "vue-cli-service lint"
? },

設(shè)置完成之后就可以用ip+端口號(hào)的形式來(lái)訪問(wèn)項(xiàng)目

在使用network進(jìn)行局域網(wǎng)訪問(wèn)時(shí)注意

局域網(wǎng)訪問(wèn)訪問(wèn)需要打開出站、入站規(guī)則
防火墻默認(rèn)打開，無(wú)法進(jìn)行network的ip訪問(wèn)，ip為本機(jī)在局域網(wǎng)中的地址
關(guān)閉防火墻（公用網(wǎng)絡(luò)）和安全軟件即可

設(shè)置完成即可使用其它設(shè)備在同一局域網(wǎng)下進(jìn)行訪問(wèn)了

注意：

如果更換了網(wǎng)絡(luò)狀態(tài)，ip地址就會(huì)發(fā)生改變，就不能用舊的ip地址訪問(wèn)，要使用新ip來(lái)訪問(wèn)項(xiàng)目

vue項(xiàng)目Network: unavailable的解決

vue項(xiàng)目npm run serve 后，只有l(wèi)ocalhost訪問(wèn)，network不能訪問(wèn)，如下：

由于這個(gè)Network是被寫死進(jìn)文件中的，所以如果網(wǎng)絡(luò)被切換了，記得修改ip地址，確保與當(dāng)前的聯(lián)網(wǎng)ip一致

解決辦法

在vue項(xiàng)目根目錄下找到或創(chuàng)建 vue.config.js 文件

在devServer配置里面添加public，如下代碼所示。 public:‘192.168.1.2:8080’,

module.exports = {
    configureWebpack: {},
    devServer: { // 環(huán)境配置
      host: '0.0.0.0',
      public: '192.168.1.2:8080', // 此處是自己電腦IP地址！
      port: '8080',
      https: false,
      disableHostCheck: true,
      open: false // 配置自動(dòng)啟動(dòng)瀏覽器
    }
}

那么，如何看public后的自己電腦IP地址？

方法一：

打開控制面板\所有控制面板項(xiàng)\網(wǎng)絡(luò)和共享中心

在網(wǎng)絡(luò)連接窗口中雙擊打開正在使用的網(wǎng)絡(luò)

點(diǎn)擊詳細(xì)信息，找到 IPv4地址，復(fù)制添加到pubilc后重新運(yùn)行后即可

方法二：

win+R 輸入cmd進(jìn)入控制臺(tái)，輸入 ipconfig 查看

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue-cli3.0實(shí)現(xiàn)一個(gè)多頁(yè)面應(yīng)用的歷奇經(jīng)歷記錄總結(jié)
這篇文章主要介紹了vue-cli3.0實(shí)現(xiàn)一個(gè)多頁(yè)面應(yīng)用的歷奇經(jīng)歷,總結(jié)分析了vue-cli3.0實(shí)現(xiàn)一個(gè)多頁(yè)面應(yīng)用遇到的問(wèn)題與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2020-03-03
vue+axios實(shí)現(xiàn)post文件下載
這篇文章主要為大家詳細(xì)介紹了vue+axios實(shí)現(xiàn)post文件下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
解決ant Design中this.props.form.validateFields未執(zhí)行的問(wèn)題
這篇文章主要介紹了解決ant Design中this.props.form.validateFields未執(zhí)行的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10
Vue中代碼編輯器與實(shí)時(shí)預(yù)覽功能
CodeMirror提供了強(qiáng)大的代碼編輯功能,而Vue.js使得組件的創(chuàng)建和數(shù)據(jù)綁定變得非常簡(jiǎn)單,當(dāng)用戶編輯代碼時(shí),實(shí)時(shí)預(yù)覽會(huì)根據(jù)代碼的變化進(jìn)行更新,從而為用戶提供了一個(gè)交互式的編程環(huán)境,這篇文章主要介紹了Vue中如何進(jìn)行代碼編輯器與實(shí)時(shí)預(yù)覽,需要的朋友可以參考下
2023-10-10
Vue2.0利用vue-resource上傳文件到七牛的實(shí)例代碼
本篇文章主要介紹了Vue2.0利用vue-resource上傳文件到七牛的實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-07-07
vue.js自定義組件實(shí)現(xiàn)v-model雙向數(shù)據(jù)綁定的示例代碼
這篇文章主要介紹了vue.js自定義組件實(shí)現(xiàn)v-model雙向數(shù)據(jù)綁定的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
Vue使用axios進(jìn)行g(shù)et請(qǐng)求拼接參數(shù)的2種方式詳解
axios中post請(qǐng)求都是要求攜帶參數(shù)進(jìn)行請(qǐng)求,這篇文章主要給大家介紹了關(guān)于Vue使用axios進(jìn)行g(shù)et請(qǐng)求拼接參數(shù)的2種方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
淺談vue中所有的封裝方式總結(jié)
因?yàn)楝F(xiàn)在vue的流行,vue的各種插件都出來(lái)了,我們公司也是使用vue做項(xiàng)目，那么應(yīng)該如何封裝，本文就介紹一下如何封裝，感興趣的可以了解一下
2021-07-07
vue項(xiàng)目如何去掉URL中#符號(hào)的方法
在開發(fā)過(guò)程中發(fā)現(xiàn)路徑中帶有/#/的標(biāo)示,而且還去不掉,很丑陋,下面這篇文章主要給大家介紹了vue項(xiàng)目如何去掉URL中#符號(hào)的相關(guān)資料,文中通過(guò)實(shí)例代碼的非常詳細(xì),需要的朋友可以參考下
2022-07-07
vue圖片裁剪插件vue-cropper使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue圖片裁剪插件vue-cropper使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12