当前位置: 首页 > article >正文

vue前端获取电脑本机的mac和ip地址

vue 前端 使用 node 里的 os 模块,来获取主机macIP地址
一、根目录创建 getNetworkInfo.js 脚本文件

const os = require("os");
function getNetworkInfo() {
  let address = "127.0.0.1";
  let mac = "";
  const networkInterfaces = os.networkInterfaces();
  for (const iface of Object.values(networkInterfaces)) {
    for (const details of iface) {
      if (
        details.family === "IPv4" &&
        details.mac !== "00:00:00:00:00:00" &&
        details.address !== "127.0.0.1"
      ) {
        mac = details.mac;
        address = details.address;
        return { mac, address };
      }
    }
  }
  return { mac, address };
}
module.exports = getNetworkInfo;

二、vue.config.js中引入

const getNetworkInfo = require("./getNetworkInfo.js");
const { mac, address } = getNetworkInfo();
// 自定义环境变量全局使用
process.env.VUE_APP_MAC = mac;
process.env.VUE_APP_ADDRESS = address;

三、页面中使用

 <template>
  <div class="box-card">
    <h3>mac:{{ mac }}</h3>
    <h3>address:{{ address }}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mac: "",
      address: "",
    };
  },
  mounted() {
    this.mac = process.env.VUE_APP_MAC;
    this.address = process.env.VUE_APP_ADDRESS;
    console.log("process.env.VUE_APP_MAC>>>→➡️➡️➡️", process.env.VUE_APP_MAC);
    console.log(
      "process.env.VUE_APP_ADDRESS>>>→➡️➡️➡️",
      process.env.VUE_APP_ADDRESS
    );
  },
};
</script>

<style lang="scss" scoped></style>

四、os 其他操作方法
其他用法:

os.EOL
定义操作系统一行结束的标识的常量。
os.arch()
返回操作系统 CPU 架构,可能的值有 “x64”、“arm” 和 “ia32”。
os.cpus()
返回一个数组对象,包括CPU的型号、速度、时间等。
os.endianness()
返回 CPU 的字节序,可能的是 “BE” 或 “LE”。
Little endian:将低序字节存储在起始地址。
Big endian:将高序字节存储在起始地址。
os.freemem()
返回操作系统空闲内存,单位是字节。
os.homedir()
返回当前用户的主目录。
os.hostname()
返回操作系统的主机名。
os.loadavg()
返回一个包含 1515 分钟平均负载的数组。
os.platform()
返回操作系统平台。
os.release()
返回操作系统的发行版本。
os.tmpdir()
返回操作系统默认的临时文件目录。
os.totalmem()
返回系统内存总量,单位为字节。
os.type()
返回操作系统名称。
os.uptime()
返回操作系统运行的时间,以秒为单位。

http://www.kler.cn/a/282435.html

相关文章:

  • 推荐一个基于协程的C++(lua)游戏服务器
  • v-html 富文本中图片使用element-ui image-viewer组件实现预览,并且阻止滚动条
  • rust高级特征
  • 不用来回切换,一个界面管理多个微信
  • 【0x001C】HCI_Write_Page_Scan_Activity详解
  • 【第三课】Rust变量与数据类型(二)
  • 国密起步2:GmSSL3使用SM4(对称加密)
  • C语言阴阳迷宫
  • 【Python机器学习】NLP词频背后的含义——隐性语义分析
  • java 读取json文件并写入Excel
  • 【功能自动化】使用测试套件运行测试函数
  • 如何上传NPM包:一步步指南
  • Java、python、php版 剧本杀拼团服务平台 剧本杀管理系统(源码、调试、LW、开题、PPT)
  • RAG Paper List - 检索增强生成论文汇总(2)
  • 一文了解内网穿透以及内网穿透工具 Sunny-Ngrok 的使用指南
  • Java的内存管理机制之(垃圾回收(GC)原理)
  • 【我的Android进阶之旅】 Android官方推荐的依赖注入框架:Dagger Hilt
  • foundation model
  • 文本分析之关键词提取(TF-IDF算法)
  • 行为型设计模式-模板方法(template method)模式
  • 数据结构(邓俊辉)学习笔记】串 17——Karp-Rabin算法:散列
  • 数据结构:栈、队列详解篇
  • Java 集合之List
  • C++ STL adjacent_find 用法与实现
  • VMware16安装包+详细安装教程
  • 虚拟机Ubuntu误操作导致无法自动联网的解决办法