Vue項目通過network的ip地址訪問注意事項及說明
Vue通過network的ip地址訪問
在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 // 配置自動啟動瀏覽器
? ? },或者在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+端口號的形式來訪問項目
在使用network進行局域網(wǎng)訪問時注意
- 局域網(wǎng)訪問訪問需要打開出站、入站規(guī)則
- 防火墻默認打開，無法進行network的ip訪問，ip為本機在局域網(wǎng)中的地址
- 關(guān)閉防火墻（公用網(wǎng)絡(luò)）和安全軟件即可
設(shè)置完成即可使用其它設(shè)備在同一局域網(wǎng)下進行訪問了
注意：
如果更換了網(wǎng)絡(luò)狀態(tài)，ip地址就會發(fā)生改變，就不能用舊的ip地址訪問，要使用新ip來訪問項目
vue項目Network: unavailable的解決
vue項目npm run serve 后，只有l(wèi)ocalhost訪問，network不能訪問，如下：
由于這個Network是被寫死進文件中的，所以如果網(wǎng)絡(luò)被切換了，記得修改ip地址，確保與當前的聯(lián)網(wǎng)ip一致
解決辦法
在vue項目根目錄下找到或創(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 // 配置自動啟動瀏覽器
}
}那么，如何看public后的自己電腦IP地址？
方法一：
打開 控制面板\所有控制面板項\網(wǎng)絡(luò)和共享中心
在網(wǎng)絡(luò)連接窗口中雙擊打開正在使用的網(wǎng)絡(luò)
點擊詳細信息，找到 IPv4地址，復(fù)制添加到pubilc后重新運行后即可
方法二：
win+R 輸入cmd進入控制臺，輸入 ipconfig 查看
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli3.0實現(xiàn)一個多頁面應(yīng)用的歷奇經(jīng)歷記錄總結(jié)
這篇文章主要介紹了vue-cli3.0實現(xiàn)一個多頁面應(yīng)用的歷奇經(jīng)歷,總結(jié)分析了vue-cli3.0實現(xiàn)一個多頁面應(yīng)用遇到的問題與相關(guān)操作注意事項,需要的朋友可以參考下2020-03-03
這篇文章主要為大家詳細介紹了vue+axios實現(xiàn)post文件下載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
解決ant Design中this.props.form.validateFields未執(zhí)行的問題
這篇文章主要介紹了解決ant Design中this.props.form.validateFields未執(zhí)行的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
CodeMirror提供了強大的代碼編輯功能,而Vue.js使得組件的創(chuàng)建和數(shù)據(jù)綁定變得非常簡單,當用戶編輯代碼時,實時預(yù)覽會根據(jù)代碼的變化進行更新,從而為用戶提供了一個交互式的編程環(huán)境,這篇文章主要介紹了Vue中如何進行代碼編輯器與實時預(yù)覽,需要的朋友可以參考下2023-10-10
Vue2.0利用vue-resource上傳文件到七牛的實例代碼
本篇文章主要介紹了Vue2.0利用vue-resource上傳文件到七牛的實例代碼，具有一定的參考價值，有興趣的可以了解一下2017-07-07
vue.js自定義組件實現(xiàn)v-model雙向數(shù)據(jù)綁定的示例代碼
這篇文章主要介紹了vue.js自定義組件實現(xiàn)v-model雙向數(shù)據(jù)綁定的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2020-01-01
Vue使用axios進行g(shù)et請求拼接參數(shù)的2種方式詳解
axios中post請求都是要求攜帶參數(shù)進行請求,這篇文章主要給大家介紹了關(guān)于Vue使用axios進行g(shù)et請求拼接參數(shù)的2種方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
因為現(xiàn)在vue的流行,vue的各種插件都出來了,我們公司也是使用vue做項目，那么應(yīng)該如何封裝，本文就介紹一下如何封裝，感興趣的可以了解一下2021-07-07
在開發(fā)過程中發(fā)現(xiàn)路徑中帶有/#/的標示,而且還去不掉,很丑陋,下面這篇文章主要給大家介紹了vue項目如何去掉URL中#符號的相關(guān)資料,文中通過實例代碼的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了vue圖片裁剪插件vue-cropper使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12