vue项目获取本机局域网IP地址

薛定喵君 发表于 2021/08/30 19:11:35 2021/08/30
【摘要】 有时会有在局域网下通过 IP 地址访问 vue 项目的需求,记录下获取本机 IP 的方法。 安装依赖获取 IP 需要借助 os 模块,我们需要先安装依赖:npm install os 配置修改需要修改项目配置文件 vue.config.js。增加一个函数用于获取本机内网 IP。const os = require('os')function getNetworkIp() { // 打开的 ...

有时会有在局域网下通过 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 了。

参考资料

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。