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;
}

2. chainWebpack 函数中增加配置。

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

使用

启动项目之后就可以从 process.env 的相应变量中获取到本机 IP 了。

参考资料

• chainWebpack(https://cli.vuejs.org/zh/config/#chainwebpack)