vue前端获取不同客户端mac地址最详细步骤(避免踩坑)

七里草香

应用场景：每个账号绑定唯一的电脑可以用网卡的mac地址来做这个唯一的字段。
作用：**可以获取到不同使用者电脑的mac地址，发送给后端**。
直接开始教程：
找了很多教程，很多都是不全的，要么就是实现不了的，所以整理了一份比较详细的避免踩坑的教程
说明我的环境 使用的是

1. vue-admin-template

复制代码

基础版开发的

1. node

复制代码

:16.18.1

1. npm

复制代码

: 8.19.2

1. vue

复制代码

:2.6.10

1. electron

复制代码

: 13.0

一、对现有的项目打包成exe文件，安装之后获取mac地址


1、对现在的vue项目 安装 : vue add electron-builder

1. 报错需要安装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>
   
7. 
   
8. <script>
   
9. import { mapGetters } from "vuex";
   
10. 
    
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>
    
58. 
    
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即可

1. 需要注意在浏览器运行的项目是获取不到mac地址的，所以我加了判断，只在electron环境中

复制代码

可以看到已经有了

总结

到此这篇关于vue前端获取不同客户端mac地址的文章就介绍到这了,更多相关vue前端获取客户端mac地址内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/3289430xf.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！