5

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

 2 years ago
source link: http://xuedingmiao.com/blog/vue_intranet_ip.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

2021-08-30 19:35:26

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

# 参考资料

本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用，但需署名作者且注明文章出处。如转载至微信公众号，请在文末添加作者公众号二维码。
阅读量：

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK