vue前端獲取不同客戶端mac地址最詳細步驟(避免踩坑)

更新時間：2024年10月17日 11:07:40 作者：心肝到爆

在開發(fā)過程中,綁定賬號和電腦的功能可以通過獲取電腦的MAC地址實現(xiàn),下面這篇文章主要介紹了vue前端獲取不同客戶端mac地址的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

一、對現(xiàn)有的項目打包成exe文件，安裝之后獲取mac地址

1、對現(xiàn)在的vue項目安裝 : vue add electron-builder

報錯需要安裝vue/cli 安裝命令：npm install -g @vue/cli

下載完成會多幾個文件，package 也會多一些命令

二、在vue.config.js里面配置

module.exports = {
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true
        } 
    }, 
}

三、開始獲取mac地址

在需要mac地址的頁面獲取，獲取的mac地址分為以太網(wǎng)和WLAN

<template>
  <div class="dashboard-container">
    <h1>mac:{{ mac }}</h1>
    <h1>address:{{ address }}</h1>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Dashboard",
  data() {
    return {
      mac: "",
      address: "",
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  async created() {
    this.getMAC();
  },
  methods: {
    getMAC() {
      // 判斷是否在Electron中運行
      if (this.isElectron()) {
        const networkInterfaces = require("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"
            ) {
              this.mac = details.mac;
              this.address = details.address;
            }
          }
        }
      } else {
        console.warn("不在 Electron 中運行，跳過獲取 MAC 地址");
      }
    },
    isElectron() {
      // 通過判斷process.versions.electron來檢查是否在Electron環(huán)境中運行
      return !!(
        window &&
        window.process &&
        window.process.versions &&
        window.process.versions.electron
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>