Vue使用Electron獲取電腦MAC位址

2021-10-04 23:24:53 字數 1450 閱讀 9532

前端使用vue開發的pc管理端,boss提出登入系統需要進行電腦機器碼認證,諮詢了好多vue的小夥伴,均告知vue無法獲取mac位址。於是利用搜尋引擎查詢,發現網上有一些說獲取mac位址的,感覺最靠譜的還是ie核心的利用activex外掛程式才能獲取。最終放棄ie使用active的外掛程式這種方案,決定使用electron對vue進行包裝成exe檔案之後,從electron的api中獲取mac位址。

node

c:\users\administrator>node -v

v 12.16.1

npm

c:\users\administrator>npm -v

6.13.4

cnpm 

c:\users\administrator>cnpm -v

se_ar**.js)

dules\npm\lib\npm.js)

[email protected] (d:\developtools\node\node.exe)

node_modules\npminstall\lib\index.js)

win32 x64 6.1.7601

registry=

vue cli 3 

vue cli3
google瀏覽器

首先初始化專案,放入vscode開啟

vue create test-electron-vue
初始化的專案結構: 

2.   執行 cnpm i 增加專案依賴,成功後會比上邊的專案初始化的根目錄多出node_modules資料夾

3.   此時在控制台輸入cnpm run serve 看專案是否會正常執行,正常情況如下:

成功執行截圖:

開啟的介面 

4.   接下來在控制台輸入 vue add electron-builder,安裝成功後,繼續輸入 cnpm run electron:serve 執行專案,如下:

預設啟動專案是除錯模式

按照下圖,就可以獲取mac位址咯。(列印的是獲取到的全部資訊,json格式的,按自己需要解析json拿就行)

對應demo連線: 。

vue專案中 electron基本使用

electron是乙個可以使用前端技術開發乙個跨平台桌面應用的框架,簡言之就是 乙個框架 使用它可以生成桌面應用vue init webpack test electron 一系列選擇後生成專案 npm run build 此時會生成dist目錄 打包前需要將資源檔案路徑改為相對路徑 此處使用腳手架...

electron使用總結

electron開發文件 環境安裝 安裝node npm 建立專案 1從github拉取示例專案 git clone 2進入專案目錄electron quick start 3修改配置main.js檔案 將mainwindow.loadfile index.html 改為mainwindow.loa...

基於Vue的Electron專案搭建

demo 專案名稱 electron vue webpack配置檔案 build.js 生產環境構建 dev client.js 熱載入相關 dev runner.js 開發環境啟動入口 webpack.main.config.js 主程序配置檔案 webpack.renderer.config.j...