前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue项目获取本机局域网IP地址

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

作者头像
薛定喵君
发布2021-09-06 14:36:43
4K0
发布2021-09-06 14:36:43
举报
文章被收录于专栏:薛定喵君薛定喵君

有时会有在局域网下通过 IP 地址访问 vue 项目的需求,记录下获取本机 IP 的方法。

安装依赖

获取 IP 需要借助 os 模块,我们需要先安装依赖:

代码语言:javascript
复制
npm install os

配置修改

需要修改项目配置文件 vue.config.js

  • 增加一个函数用于获取本机内网 IP。
代码语言:javascript
复制
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;
}
  • chainWebpack 函数中增加配置。
代码语言:javascript
复制
config.plugin('define').tap((args) => {
  let ip = getNetworkIp();
  args[0]['process.env'].BASE_IP = `"http://${ip}:${port}"`;
  return args;
});

使用

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

参考资料

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-08-30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 安装依赖
  • 配置修改
  • 使用
  • 参考资料
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档