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

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

需要注意的是这篇教程只能获取本地的,打包到服务器上也是服务器的。需要获取不同使用者的客户端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()
返回操作系统运行的时间,以秒为单位。
相关推荐
Csvn9 小时前
WASM
前端
修己xj10 小时前
我用 AI 给自己写了一个 Markdown 编辑器,然后把它开源了
前端
FRing0311 小时前
vue2干货总结2(v-bind、v-for、v-model、指令修饰符、v-bind操作class和style)
开发语言·前端·vue.js·vue2
幸运小猿11 小时前
模拟慢上传-处理超时重试image 丢失线上问题
前端·javascript·html
moshuying13 小时前
网购能买Token了!
前端
h_654321013 小时前
echarts实现柱状图加一条横线
前端·echarts
风骏时光牛马13 小时前
生成一个后端标题,只需要一个标题,不需要其他的任何文本。
前端
子非鱼@Itfuture13 小时前
关于前后端联调中登录状态/登录信息失效?
java·前端
郭小李13 小时前
openFeign入门
java·开发语言·前端
馒头不想说话13 小时前
AI当运营,帮你省人力
前端