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 了。

参考资料

上一篇:无刷新上传图片,ajax 和 iframe


下一篇:vue-router切换不同参数共用路由来显示页面的方法