vue项目获取本机局域网IP地址-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

简介: 局域网下获取本机 IP 地址方便访问 vue 项目

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

参考资料

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章