vue項目擷取本機區域網路IP位址

有時會有在區域網路下通過 IP 位址通路 vue 項目的需求，記錄下擷取本機 IP 的方法。

安裝依賴

擷取 IP 需要借助

os

子產品，我們需要先安裝依賴：

npm install os           

配置修改

需要修改項目配置檔案

vue.config.js

。

1. 增加一個函數用于擷取本機内網 IP。

const os = require('os')
function getNetworkIp() {
  // 打開的 host
  let needHost = '';
  try {
    // 獲得網絡接口清單
    let network = os.networkInterfaces();
    console.log(network);
    for (let dev in network) {
      let iface = network[dev];
      for (let i = 0; i < iface.length; i++) {
        let alias = iface[i];
        if (
          alias.family === 'IPv4' &&
          alias.address !== '127.0.0.1' &&
          !alias.internal
        ) {
          needHost = alias.address;
        }
      }
    }
  } catch (e) {
    needHost = 'http://localhost';
  }
  return needHost;
}           

1. chainWebpack

   函數中增加配置。

config.plugin('define').tap((args) => {
  let ip = getNetworkIp();
  args[0]['process.env'].BASE_IP = `"http://${ip}:${port}"`;
  return args;
});           

使用

啟動項目之後就可以從

process.env

的相應變量中擷取到本機 IP 了。

參考資料

• chainWebpack