無法使用 electron 讀取 /node_modules/bindings/bindings.js 中未定義的屬性“模塊”並安裝串行端口

Question

1.  npm install -g node-gyp
2.  npm install serialport -S
3.  npm install electron-rebuild -D
4. ./node_modules/.bin/electron-rebuild.cmd

然后，重建完成。

當我運行這個命令時： npm run electron:serve我像這樣檢查瀏覽器 electron 時出錯。

如果我輸入bindings.js代碼，我可以找到錯誤在哪里：

nodePreGyp:
  'node-v' +
    process.versions.modules

有我的 package.json 文件：

 {"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "electron:build": "vue-cli-service electron:build", "electron:serve": "vue-cli-service electron:serve", "postinstall": "electron-builder install-app-deps", "postuninstall": "electron-builder install-app-deps" }, "main": "background.js", "dependencies": { "axios": "^0.21.0", "bindings": "^1.5.0", "core-js": "^3.6.5", "echarts": "^5.0.0", "element-resize-detector": "^1.2.1", "element-ui": "^2.14.1", "serialport": "^9.0.7", "sockjs-client": "^1.5.0", "vue": "^2.6.11", "vue-i18n": "^8.22.4", "vue-router": "^3.2.0", "vuex": "^3.4.0", "webstomp-client": "^1.2.6", "ws": "^7.4.3" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/eslint-config-prettier": "^6.0.0", "babel-eslint": "^10.1.0", "electron": "^7.1.9", "electron-rebuild": "^2.3.5", "electron-builder": "^20.19.2", "electron-devtools-installer": "^3.1.0", "eslint": "^6.7.2", "eslint-plugin-prettier": "^3.1.3", "eslint-plugin-vue": "^6.2.2", "node-sass": "^4.12.0", "prettier": "^1.19.1", "sass-loader": "^8.0.2", "svg-sprite-loader": "^5.2.1", "vue-cli-plugin-electron-builder": "~2.0.0-rc.5", "vue-template-compiler": "^2.6.11" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended", "@vue/prettier" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ], "__npminstall_done": false }

你能告訴我問題出在哪里或幫助我更了解如何解決這個問題嗎？

Answer 1

我建議如果您使用 VueJS 使用 electron 請參閱https://github.com/SimulatedGREG/electron-vue已經構建了所有代碼並且也很有幫助

第一次面對使用 Electron 實現現有 VueJS 項目 SerialPort Package 的相同問題

在此處輸入圖像描述

 <template> <div id="wrapper"> <h2>Hello world</h2> <button @click="listMyPorts">Show Ports</button> <pre v-if="msg.length">{{msg}}</pre> </div> </template> <script> const serialport = require('serialport') export default { name: 'landing-page', data: () => ({ msg: [] }), methods: { async listSerialPorts () { await serialport.list().then((ports, err) => { if (err) { this.msg.push(err.message) return } else { this.msg.push('') } console.log('ports', ports) this.msg.push(ports) if (ports.length === 0) { this.msg.push('No ports discovered') } }) }, listMyPorts () { let vm = this setTimeout(function listPorts () { vm.listSerialPorts() setTimeout(listPorts, 2000) }, 2000) } } } </script> <style scoped> </style>