vue-electron使用serialport时问题解决方案

报错如下：

Uncaught TypeError: Cannot read property 'modules' of undefined
at Object.eval (webpack-internal:///./node_modules/bindings/bindings.js:29)
at eval (webpack-internal:///./node_modules/bindings/bindings.js:223)
at Object../node_modules/bindings/bindings.js (chunk-vendors.js:255)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (webpack-internal:///./node_modules/@serialport/bindings/lib/linux.js:2)
at Object../node_modules/@serialport/bindings/lib/linux.js (chunk-vendors.js:65)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at Object.eval (webpack-internal:///./node_modules/@serialport/bindings/lib/index.js:14)

总结下来：webpack不能解析二进制什么的...github有讨论

系统：win10
"dependencies": {
    "core-js": "^3.6.5",
    "electron-prebuilt": "^1.4.13",
    "serialport": "^9.2.1",
    "vue": "^2.6.11"
},
"devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "electron": "^13.0.0",
    "electron-devtools-installer": "^3.1.0",
    "electron-rebuild": "^3.2.3",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-cli-plugin-electron-builder": "~2.1.1",
    "vue-template-compiler": "^2.6.11"
},

解决方法：

const { IgnorePlugin } = require('webpack')

module.exports = {
  pluginOptions: {
    plugins: [
      new IgnorePlugin({
        resourceRegExp: /serialport/
      })
    ],
    electronBuilder: {
      nodeIntegration: true,
      externals: [
        'serialport'
      ]
    }
  }
}

app.allowRendererProcessReuse = false

重新运行即可

到此这篇关于vue-electron使用serialport时问题解决方案的文章就介绍到这了,更多相关vue-electron使用serialport时问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3和Electron实现桌面端应用详解

    Vue3和Electron实现桌面端应用详解

    目录 Vue CLI 搭建Vue项目 Vue项目改造为markdown编辑器 Vue CLI Plugin Electron Builder 优化功能 启动全屏显示 修改菜单栏 编辑器打开markdonw文件的内容 markdonw的内容存入文件 打包 为了方便记录一些个人随笔,我最近用Laravel和Vue 3.0撸了一个博客系统,其中使用到了一个基于markdown-it的 markdown 编辑器Vue组件v-md-editor.我感觉用它去编写markdown还是很方便的.后面就有了一个

  • Electron+vue从零开始打造一个本地播放器的方法示例

    为什么要做? 女朋友工作是音频后期,平常会收集一些音频音乐,需要看音频的频谱波形,每次用au这种大型软件播放音乐看波形,很不方便,看到她这么辛苦,身为程序猿的我痛心疾首,于是,就有了这么一个小软件,软件涉及到的技术主要为electron,vue,node,波形的展示主要通过wavesurfer生成. 从零开始-搭建项目 项目通过vue脚手架搭建的,所以需要安装cli工具,如果已经装了,可以跳过这一步. npm install -g @vue/cli # OR yarn global add @v

  • electron踩坑之remote of undefined的解决

    之前的项目,引用electron的remote可以直接调用 electron.remote 来去使用,而近期使用electron却频繁报错???踩坑后我快速去查看了下官方文档,是不是electron进行了更新?果然不出所料,在electron 10中,修改了enableRemoteModule默认为false,我们需要手动将其修改为true. 此前版本中我们使用electron中的remote模块时,不需在主进程的窗口中加入 enableRemoteModule:true 参数才能够调用remo

  • vue3+electron12+dll开发客户端配置详解

    当前使用的版本为 @vue/cli4 创建的 vue3.0 + typescript + electron 12 版本创建,其他版本暂未测试.网上资料良莠不齐,因此花费时间依次试验,达到一个目前最优解. 修改仓库源 由于electron版本的未知性,可能存在serve可用而build之后打开白屏的情况,因此需要谨慎对待.最好在版本可用的情况下commit一个版本,方便代码回滚,如果谁有更好的资料希望共享. 在开始配置前,可以将yarn和npm的rc文件稍作修改,使用命令或者文件直接修改.npmr

  • 基于 Vue 的 Electron 项目搭建过程图文详解

    Electron 应用技术体系推荐 目录结构 demo(项目名称) ├─ .electron-vue(webpack配置文件) │ └─ build.js(生产环境构建代码) | └─ dev-client.js(热加载相关) │ └─ dev-runner.js(开发环境启动入口) │ └─ webpack.main.config.js(主进程配置文件) │ └─ webpack.renderer.config.js(渲染进程配置文件) │ └─ webpack.web.config.js ├

  • electron踩坑之dialog中的callback解决

    踩坑分析 之前版本使用dialog时选择文件时,可以加入callback,来获取被选择文件的路径,而electron10更新后发生了改动,采用了Promise对象来获取结果. electron 10之前我们获取文件路径,只需加入callback即可,也就是下述写法,且之前返回的data结果直接是文件的路径. openDialogDom.onclick = function(){ remote.dialog.showOpenDialog({ properties:['openFile'] },fu

  • vue-electron使用serialport时问题解决方案

    vue-electron使用serialport时问题解决方案

    报错如下: Uncaught TypeError: Cannot read property 'modules' of undefined at Object.eval (webpack-internal:///./node_modules/bindings/bindings.js:29) at eval (webpack-internal:///./node_modules/bindings/bindings.js:223) at Object../node_modules/bindings/

  • vue多层弹框时存在遮挡的解决方案

    vue多层弹框时存在遮挡的解决方案

    目录 问题: 解决方案: 正确思路: 问题: 如上图所示,当存在多层弹框时,点击黄色弹框中红色内容,弹出蓝色弹框时,出现上述情况,即表现出顶层弹框被遮挡的现象,当我们点击蓝色弹框时又会出现遮挡消失的情况,下面将对这一问题提出相应的解决办法. 解决方案: 本人解决思路,首先想到的是找到对应的遮挡层的css标签,然后修改z-index值,从而解决不同弹框遮挡层在页面的z-index的不同,但是本思路只能解决首次问题,再次打开还会存在相同的问题,故该思路错误 正确思路: 查看组件中不同属性的作用,我使

  • vue + electron应用文件读写操作

    vue + electron应用文件读写操作

    目录 vue + electron应用文件读写 正常操作流程 vue + electron应用文件读写 在使用electron制作桌面应用时,基本都会需要数据的存储. 如果要制作的应用并不复杂,完全可以将数据存储在本地文件当中,然后应用就可以通过这些文件进行数据的读写. 因为electron的主进程是支持node的,所以可以通过fs文件系统对文件完成读写操作. 正常操作流程 首先先创建一个vue项目, 可以使用vue cli进行创建 通过yarn serve命令测试是否能否运行成功,界面正常出现

  • vue使用Element组件时v-for循环里的表单项验证方法

    标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了. 首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了. 然鹅问题来了,如果表单项里有通过v-for动态生成的表单项,如何设置验证呢?这个官方文档并没有明确的说法

  • SpringBoot + Vue + Electron 开发 QQ 版聊天工具的详细教程

    一.简介 这是一款基于 JS 实现的超轻量级桌面版聊天软件.主要适用于私有云项目内部聊天,企业内部管理通讯等功能,主要通讯协议websocket.也支持web网页聊天实现.文字聊天,互传文件,离线消息,群聊,断线重连等功能. 先看一下效果,下图左边是web版,右边为PC版. 二.本地搭建 2.1 技术栈 后端技术栈: springboot: 让开发人员快速开发的一款Java的微服务框架. tio: 是百万级网络框架oauth2.0: OAuth 2.0 是一个行业的标准授权协议. OAuth 2

  • 关于Vue 消除Token过期时刷新页面的重复提示问题

    token过期时,刷新页面,页面如果加载时向后端发起多个请求,会重复告警提示,经过处理,只提示一次告警. 1.问题现象   页面长时间未操作,再刷新页面时,第一次弹出"token失效,请重新登录!"提示,然后跳转到登录页面,接下来又弹出了n个"Token已过期"的后端返回消息提示. 2.原因分析   当前页面初始化,有多个向后端查询系统参数的调用,代码如下: created () { // ======================================

  • vue + Electron 制作桌面应用的示例代码

    vue + Electron 制作桌面应用的示例代码

    1.vue打包 这里使用vue原生打包命令,对vue项目进行打包 npm run build 2.配置 Electron 使用 Electron 制作桌面应用需要两个配置文件 1.package.json 创建一个package.json文件,将以下代码放入 { "name": "demo", //项目名称 "productName": "demo", "author": "作者", &

  • Vue.js 应用性能优化分析+解决方案

    Vue.js 应用性能优化分析+解决方案

    目录 一.介绍 二.为什么我们需要 Vue JS 性能优化? 三.Vue 性能不佳背后的主要原因 1. 生成报告 2. 运行命令和npm 运行生成 四.如何优化 Vue js 应用程序的性能? 1. 在 Vue js 中懒加载 2. 基于路线的代码拆分 3.Vue js预加载组件 4. 优化第三方库 5. 使用浏览器缓存 6. 优化和压缩图像 前言: 假设我们在开发整个 Vue 应用程序方面非常努力.js.但没有优先考虑其性能:现在,我们的应用程序需要一段时间来加载.导航.提交或执行任何用户操作

  • 解决vue多层弹框时存在遮挡问题

    目录 问题: 解决方案: 正确思路: 问题: 如上图所示,当存在多层弹框时,点击黄色弹框中红色内容,弹出蓝色弹框时,出现上述情况,即表现出顶层弹框被遮挡的现象,当我们点击蓝色弹框时又会出现遮挡消失的情况,下面将对这一问题提出相应的解决办法. 解决方案: 本人解决思路,首先想到的是找到对应的遮挡层的css标签,然后修改z-index值,从而解决不同弹框遮挡层在页面的z-index的不同,但是本思路只能解决首次问题,再次打开还会存在相同的问题,故该思路错误 正确思路: 查看组件中不同属性的作用,我使

  • vue electron实现无边框窗口示例详解

    vue electron实现无边框窗口示例详解

    目录 一.前言 二.实现方案 1.创建无边框窗口 2.创建windows窗口控件组件 三.后记 一.前言 无边框窗口是不带外壳(包括窗口边框.工具栏等),只含有网页内容的窗口.对于一个产品来讲,桌面应用带边框的很少,因为丑(我们的UI觉得--与我无关-.-).因此我们就来展开说下,在做无边框窗口时候需要注意的事项以及我踩过的坑. 二.实现方案 1.创建无边框窗口 要创建无边框窗口,只需在 BrowserWindow的 options 中将 frame 设置为 false: const { Bro

随机推荐