vue前端获取差别的客户端mac地点(最详细，制止踩坑)

vue前端获取差别的客户端mac地点(最详细，制止踩坑)

应用场景：每个账号绑定唯一的电脑可以用网卡的mac地点来做这个唯一的字段。
作用：**可以获取到差别使用者电脑的mac地点，发送给后端**。
直接开始教程：
找了很多教程，很多都是不全的，要么就是实现不了的，以是整理了一份比力详细的制止踩坑的教程
阐明我的环境  使用的是vue-admin-template根本版开辟的
node:16.18.1  npm: 8.19.2  vue :2.6.10  electron : 13.0
一、对现有的项目打包成exe文件，安装之后获取mac地点

1、对如今的vue项目 安装 : vue add electron-builder

报错须要安装vue/cli  安装下令：npm install -g @vue/cli

下载完成会多几个文件，package 也会多一些下令

二、 在vue.config.js内里设置

1. module.exports = {
2.     pluginOptions: {
3.         electronBuilder: {
4.             nodeIntegration: true
5.         }
6.     },
7. }

复制代码

三、开始获取mac地点

在须要mac地点的页面获取，获取的mac地点分为以太网和WLAN

1. <template>
2.   <div class="dashboard-container">
3.     <h1>mac:{{ mac }}</h1>
4.     <h1>address:{{ address }}</h1>
5.   </div>
6. </template>
8. <script>
9. import { mapGetters } from "vuex";
11. export default {
12.   name: "Dashboard",
13.   data() {
14.     return {
15.       mac: "",
16.       address: "",
17.     };
18.   },
19.   computed: {
20.     ...mapGetters(["name"]),
21.   },
22.   async created() {
23.     this.getMAC();
24.   },
25.   methods: {
26.     getMAC() {
27.       // 判断是否在Electron中运行
28.       if (this.isElectron()) {
29.         const networkInterfaces = require("os").networkInterfaces();
30.         for (const iface of Object.values(networkInterfaces)) {
31.           for (const details of iface) {
32.             if (
33.               details.family === "IPv4" &&
34.               details.mac !== "00:00:00:00:00:00" &&
35.               details.address !== "127.0.0.1"
36.             ) {
37.               this.mac = details.mac;
38.               this.address = details.address;
39.             }
40.           }
41.         }
42.       } else {
43.         console.warn("不在 Electron 中运行，跳过获取 MAC 地址");
44.       }
45.     },
46.     isElectron() {
47.       // 通过判断process.versions.electron来检查是否在Electron环境中运行
48.       return !!(
49.         window &&
50.         window.process &&
51.         window.process.versions &&
52.         window.process.versions.electron
53.       );
54.     },
55.   },
56. };
57. </script>
59. <style lang="scss" scoped>
60. .dashboard {
61.   &-container {
62.     margin: 30px;
63.   }
64.   &-text {
65.     font-size: 30px;
66.     line-height: 46px;
67.   }
68. }
69. </style>

复制代码

四、 之后运行npm run electron:serve大概打包 npm run electron:build即可

须要注意在欣赏器运行的项目是获取不到mac地点的，以是我加了判断，只在electron环境中
可以看到已经有了