electron-vue制作桌面應用&引入node-serialport串口工具


想做一個類似上位機的軟件,可以和設備通過串口進行通訊

首先想的是(邏輯性語言,精通的只有js O(∩_∩)O),js是否可以監聽和寫入電腦串口數據,百度發現,node.js有一款組件serialport,可以實現

但是由於是在node中,並且后期了解到,serialport是由c++編寫,需要反編譯到js

所以考慮:使用electron打包桌面應用,內嵌node環境,打包前反編譯好serialport即可

 

1.新建項目,安裝vue-cli

npm install -g vue-cli

2.electron提供了官方基於vue的項目 ,直接創建electron-vue項目

vue init simulatedgreg/electron-vue electron-vue-name

3.cd至項目目錄下

4.安裝node_modules

npm install

安裝完成后,npm run dev,可以正常打開桌面應用即可

5.安裝node-gyp

npm install -g node-gyp

6.安裝python2.7&vc2015,可以直接下載軟件安裝,也可以使用命令行安裝

npm install --global --production windows-build-tools
npm config set python python2.7 
npm config set msvs_version 2015

7.測試gyp

node-gyp

成功顯示

PS E:\exe\electron-vue> node-gyp

  Usage: node-gyp <command> [options]

  where <command> is one of:
    - build - Invokes `msbuild` and builds the module
    - clean - Removes any generated build files and the "out" dir
    - configure - Generates MSVC project files for the current module
    - rebuild - Runs "clean", "configure" and "build" all at once
    - install - Install node development files for the specified node version.
    - list - Prints a listing of the currently installed node development files
    - remove - Removes the node development files for the specified version

node-gyp@8.1.0  C:\Users\zhupengfei\AppData\Roaming\npm\node_modules\node-gyp
node@16.4.1

8.安裝serialport

npm install serialport

9.安裝electron-rebuild 用於重新編譯c++原生模塊

npm install --save-dev electron-rebuild

10.對serialport進行重編譯

.\node_modules\.bin\electron-rebuild.cmd 

編譯出錯可以手動編譯,cd至./node_modules/@serialport/bindings ---------- 其實就是對bindings里的文件進行重編譯,編譯為bindings.node,此處,可能在編譯時不報錯,但是,在生成的應用內報錯bindings.node不是標准的win32程序,不知道怎么解決

node-gyp rebuild --target=2.0.4 --arch=x64 --dist-url=https://npm.taobao.org/mirrors/atom-shell

重編譯沒有問題的話,基本就沒問題了

 

注:

  1.誤打誤撞實現的成功編譯並運行,此前一直都是編譯不報錯,運行在控制台就會報bindings.node不是標准的win32程序,使用手動編譯又會報錯缺少關鍵DLL文件

  2.編譯成功后,就不用在編譯了,就盡量不要在編譯了,防止出現什么幺蛾子,除非又引入了什么需要重編譯的依賴

  3.參考文檔:“https://www.cnblogs.com/flypig666/p/12709550.html”,非常感謝!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM