獲取本機電腦IP的正確使用方法

佳寶兒發表於2018-11-28

前端開發大多數人會mock資料，且公司內一般都會有一套自成體系的mock資料的方法，今天就來講一講結合mock，前端需要做的一些配置（當然都是為了省時省事）

首先

使用mcok會自動起一個node服務，此時所有的介面及資料都會成列表展示，見下圖：

獲取本機電腦IP的正確使用方法

當我們在移動端除錯的時候，我們都知道，需要用到IP去進行訪問，但是此時IP有可能是動態的，我們又不想每次都去修改這個IP，那麼重點來了。。。

我們先去獲取到本機IP，直接上程式碼

// 獲取本機電腦IP
function getIPAdress() {
    let interfaces = require('os').networkInterfaces();
    for (var devName in interfaces) {
        var iface = interfaces[devName];
        for (var i = 0; i < iface.length; i++) {
            let alias = iface[i];
            if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
                // console.log(alias.address);

                return alias.address
            }
        }
    }
}

複製程式碼

其次

我們獲取到IP後，需要在頁面js中使用，此時我們需要找一個變數去承接它，那就自然而然的想到webpack.DefinePlugin 程式碼如下：

new webpack.DefinePlugin({
    'process.env': {
        SERVERIP:JSON.stringify({"serverIp":serverIp})  //將本地電腦IP用變數存起來，便於在本地測試時使用
    }
})

複製程式碼

最後

我們就可以直接在頁面js中使用了

const httpIP = process.env.SERVERIP.serverIp;

const httpURL =`http://${httpIP}:3020`;

複製程式碼

參考連結：

webpack.docschina.org/plugins/def…

相關文章