vue前端獲取本地IP地址代碼實例
更新時間:2024年05月11日 08:55:11 作者:一百減一是零
再做前端頁面的時候,想獲取本地的ip地址,可能是為了和服務(wù)器通信,可能是為了展示,無論哪種,下面給大家總結(jié)下方法,這篇文章主要給大家介紹了關(guān)于vue前端獲取本地IP地址的相關(guān)資料,需要的朋友可以參考下

新建js文件
getIpAddress.js
//獲取本機的IP地址
function getNetworkIp() {
let ip = 'localhost';
try {
const network = Os.networkInterfaces();//獲取本機的網(wǎng)路
for (const iter in network) {
const faces = network[iter];
for (const interface of faces) {
if (interface.family === 'IPv4' && interface.address !== '127.0.0.1' && !interface.internal) {
ip = interface.address;
return ip;
}
}
}
} catch (e) {
}
return ip;
}
module.exports = getNetworkIp;在index.js文件中添加以下配置
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// Various Dev Server settings
host: getNetworkIp(), // can be overwritten by process.env.HOST
useLocalIp: true,//允許使用本地IP地址進行訪問
port: 18880, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: false
},總結(jié)
到此這篇關(guān)于vue前端獲取本地IP地址的文章就介紹到這了,更多相關(guān)vue獲取本地IP地址內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
您可能感興趣的文章:
相關(guān)文章
vue兩組件間值傳遞 $router.push實現(xiàn)方法
兩組件間傳值,可能包含多種情況,這篇文章主要介紹了vue兩組件間值傳遞 $router.push實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
vue如何設(shè)置描點跳轉(zhuǎn)到對應(yīng)頁面
這篇文章主要介紹了vue如何設(shè)置描點跳轉(zhuǎn)到對應(yīng)頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
Vue加載讀取本地txt/json等文件的實現(xiàn)方式
這篇文章主要介紹了Vue加載讀取本地txt/json等文件的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue 3集成??礧eb插件實現(xiàn)視頻監(jiān)控功能
本文詳細介紹了如何使用 Vue 3 框架集成??礧eb插件實現(xiàn)視頻監(jiān)控功能,通過定義屬性、事件、變量,以及編寫初始化、播放視頻、處理節(jié)點點擊事件等方法,我們成功實現(xiàn)了視頻監(jiān)控系統(tǒng)的前端部分,感興趣的朋友一起看看吧2024-11-11
Vue中使用require.context自動引入組件的操作方法
require.context?是?webpack?提供的一個API,用于創(chuàng)建context,即一組具有相同上下文的模塊,使用?require.context?可以方便地加載多個模塊,并且可以靈活地控制模塊的加載順序和依賴關(guān)系,本文給大家講解Vue中使用require.context自動引入組件的方法,感興趣的朋友一起看看吧2024-01-01
vue cli 3.x 項目部署到 github pages的方法
這篇文章主要介紹了vue cli 3.x 項目部署到 github pages的方法,非常不錯,具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04

