京东6.18大促主会场领京享红包更优惠

 找回密码
 立即注册

QQ登录

只需一步,快速开始

vue前端获取不同客户端mac地址最具体步调(克制踩坑)

2024-11-3 10:56| 发布者: db4d5a85| 查看: 49| 评论: 0

摘要: 目录一、对现有的项目打包成exe文件,安装之后获取mac地址1、对现在的vue项目 安装 : vue add electron-builder二、 在vue.config.js内里配置三、开始获取mac地址四、 之后运行npm run electron:serve或者打包
目录

应用场景:每个账号绑定唯一的电脑可以用网卡的mac地址来做这个唯一的字段。

作用:**可以获取到不同使用者电脑的mac地址,发送给后端**。

直接开始教程:

找了许多教程,许多都是不全的,要么就是实现不了的,以是整理了一份比较具体的克制踩坑的教程

分析我的情况 使用的是[code]vue-admin-template[/code]基础版开发的

[code]node[/code]:16.18.1 [code]npm[/code]: 8.19.2 [code]vue[/code] :2.6.10 [code]electron[/code] : 13.0

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

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

[code]报错必要安装vue/cli 安装下令:npm install -g @vue/cli[/code]

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

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

[code]module.exports = { pluginOptions: { electronBuilder: { nodeIntegration: true } }, } [/code]

三、开始获取mac地址

在必要mac地址的页面获取,获取的mac地址分为以太网和WLAN

[code]<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情况中运行 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> [/code]

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

[code]必要注意在欣赏器运行的项目是获取不到mac地址的,以是我加了判定,只在electron情况中[/code]

可以看到已经有了

总结 

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


来源:https://www.jb51.net/javascript/3289430xf.htm
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
关闭

站长推荐上一条 /6 下一条

QQ|手机版|小黑屋|梦想之都-俊月星空 ( 粤ICP备18056059号 )|网站地图

GMT+8, 2025-7-2 02:56 , Processed in 0.037628 second(s), 19 queries .

Powered by Mxzdjyxk! X3.5

© 2001-2025 Discuz! Team.

返回顶部