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

vue 前端 使用 node 里的 os 模块,来获取主机macIP地址

需要注意的是这篇教程只能获取本地的,打包到服务器上也是服务器的。需要获取不同使用者的客户端mac,看我这篇。获取客户端不同的mac地址

一、根目录创建 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()
返回一个包含 1、5、15 分钟平均负载的数组。


os.platform()
返回操作系统平台。


os.release()
返回操作系统的发行版本。


os.tmpdir()
返回操作系统默认的临时文件目录。


os.totalmem()
返回系统内存总量,单位为字节。


os.type()
返回操作系统名称。


os.uptime()
返回操作系统运行的时间,以秒为单位。
相关推荐
layman05282 小时前
webpack5 css-loader:从基础到原理
前端·css·webpack
半桔2 小时前
【前端小站】CSS 样式美学:从基础语法到界面精筑的实战宝典
前端·css·html
AI老李2 小时前
PostCSS完全指南:功能/配置/插件/SourceMap/AST/插件开发/自定义语法
前端·javascript·postcss
_OP_CHEN2 小时前
【前端开发之CSS】(一)初识 CSS:网页化妆术的终极指南,新手也能轻松拿捏页面美化!
前端·css·html·网页开发·样式表·界面美化
啊哈一半醒2 小时前
CSS 主流布局
前端·css·css布局·标准流 浮动 定位·flex grid 响应式布局
PHP武器库2 小时前
ULUI:不止于按钮和菜单,一个专注于“业务组件”的纯 CSS 框架
前端·css
电商API_180079052472 小时前
第三方淘宝商品详情 API 全维度调用指南:从技术对接到生产落地
java·大数据·前端·数据库·人工智能·网络爬虫
晓晓莺歌2 小时前
vue3某一个路由切换,导致所有路由页面均变成空白页
前端·vue.js
Up九五小庞2 小时前
开源埋点分析平台 ClkLog 本地部署 + Web JS 埋点测试实战--九五小庞
前端·javascript·开源
qq_177767373 小时前
React Native鸿蒙跨平台数据使用监控应用技术,通过setInterval每5秒更新一次数据使用情况和套餐使用情况,模拟了真实应用中的数据监控场景
开发语言·前端·javascript·react native·react.js·ecmascript·harmonyos