electron+vue项目使用serialport报错Cannot read property ‘indexOf‘ of undefined解决办法

最新推荐文章于 2024-04-23 14:51:51 发布

web前端小学生

最新推荐文章于 2024-04-23 14:51:51 发布

阅读量954

点赞数 8

CC 4.0 BY-SA版权

分类专栏：【踩过的坑】文章标签： vue.js javascript serialport

本文链接：https://blog.youkuaiyun.com/anyaoqi/article/details/135595554

【踩过的坑】专栏收录该内容

19 篇文章

订阅专栏

本文讲述了在使用Electron和Vue项目时遇到的serialport引入错误，解决方案是在vue.config.js的electronBuilder配置中添加serialport到externals数组中，以避免‘indexOf’ofundefined的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

描述

使用Electron+Vue项目时引入serialport串口后启动时报下面错误

Cannot read property 'indexOf' of undefined

serialport报错Cannot read property 'indexOf' of undefined

解决方法

打开vue.config.js找到pluginOptions -> electronBuilder -> externals添加serialport

module.exports = {
  pluginOptions: {
    electronBuilder: {
      externals: ['serialport'],
    }
  }
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

web前端小学生

关注关注

8
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

electron+vue+elementui+serialport运行报错解Error: No native build was found for platform=win32 arch=x64

defore2008的专栏

04-03

660

在vue.config.js文件中加入如下配置：plugins: [})],

vue3+typescript+electron+NodeSerialport开发环境搭建

Havoc_Z的博客

11-04

1212

由于现在网上的教程文档使用的版本还有发布时间过于久远，前端技术更新较快，所以有了这一篇开发环境搭建目录安装node.js 安装vue-cli 创建一个vue项目 vue项目集成electron 安装NodeSerialport的准备工作安装node-gyp 安装python 安装C++环境安装NodeSerialport 安装node.js node官网网址点击进入node官网网址，下载16.13.0 LTS长期支持版本默认一路安装使用Wi...

1 条评论您还未登录，请先登录后发表或查看评论

electron-vue使用serialport报错问题

ling_lang的博客

07-05

1190

简单的通过命令安装后直接导入使用会提升找不到serialport或者报与之相关的错误。解决方法：依次安装 npm install electron-prebuilt --save npm install serialport --save npm install --save-dev electron-rebuild 最后重新编译： .\node_modules\.bin\electron-rebuild.cmd 或者 .\node_modules\.bin\electron-rebuild

electron使用serialport打包报错

生而为人我很抱歉

03-09

484

需要将serialport加入：

electron+vue+better-sqlite3构建报错：Cannot read property ‘indexOf‘ of undefined

L5Y777的博客

07-04

3045

最近做一个软件，用better-sqlite3存储数据用vue3做前端，用IPC进程间通信模拟ajax请求实现前后端分离。后端简单模仿MVC框架写了一遍，后端在node环境下测试没有问题，但是打包进electron项目中就出现了问题原因是使用DBUtils中使用better-sqlite3的new Database方法打开sqlite数据库文件时，调用了bindings库中的getFileName方法。打开bindings.js这个文件找到此方法：从上面的代码发现，报错中的in.......

记一次服务端打包：cannot read properties of undefined (reading ‘nodes‘)

mosowe

01-25

6348

排了两个小时的队，眼看就要轮到我做核酸了，然后微信群里测试大佬来了一句话：你不在没法搞下去了。打开微信一瞅，一个截图，红彤彤的文字告诉我，这尼玛报错了。 cannot read properties of undefined (reading 'nodes') 我们开发总共有三个环境：测试环境预发布环境生产环境因为在测试和预发布均不存在这个问题，到了生产环境才出现的，我的第一直觉是：后端数据不正确的原因，可能是生产还没来得及提供相关字段或者数据格式不对导致，但是看到这个bug又有点不确定，因

electron使用serialport报错An object could not be cloned

生而为人我很抱歉

03-09

617

serialport获取的对象不能克隆。你需要转成json再传输。

electron-vue+serialport+sqljs+iview

weixin_42851857的博客

04-01

1141

electron收银系统客屏显示实现串口通信serialport使用和调试

weixin_45758420的博客

12-06

2498

electron收银系统客屏显示实现串口通信serialport，编译出现报错相应解决和串口写入的调试

桌面端框架Electron使用问题整理和总结

Jsoning的博客

02-26

5793

文章主要记录了使用electron日常开发中所遇到的一些坑以及怎样填坑，帮助其他开发的小伙伴少踩一些坑。建议关注收藏，以便遇到时候方便查阅！ electron这个框架我就不过多介绍了，是使用node和Chromium架构的一个桌面端框架，如果有了解使用web技术开发桌面端，这个框架多少会听说过或者正在使用。下面就记录一下自己在阅读文档的一些疑问以及开发过程中踩过的坑！ electron？ ...

electron收银

07-28

\[1\]在具体的问题中，使用了vue_cli3.x构建的项目，其他一切正常，但是node-serialport模块无法编译和运行，报错信息为Cannot read property 'indexOf' of undefined at Function.getFileName。经过查找，最终在...

electron-vue使用serialport串口通信及踩过的坑（已解决！）

w_ziShan的博客

04-10

4771

一、配置环境

打包electron 报错 Access is denied

weixin_52436916的博客

06-30

1035

报错原因是因为后台有正在运行的electron进程, 打包前务必杀掉所有electron进程后再进行打包。

electron使用serialport报错NODE_MOUDLE_VERSION不一致

yurhzzu的博客

08-20

4047

为了操作串口，在electron中使用serialport中使用了原生模块serialport 我的环境是：nodejs版本v10.15.3，eletron版本v4.2.0，serialport版本v7.1.5，VS2017，python版本v2.7.15 npm install --save serialport 下载serialport后直接使用const Serialport = re...

vue-electron使用serialport遇到的奇葩问题

echo_Ae的博客

09-07

1703

报错如下： 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/bi...

Electron项目使用serialport发生的问题总结

weixin_42258548的博客

07-19

2711

光是编译serialport就花费了我4天时间，以此激励蠢笨的我前言我在网上也查了很多资料，但是总是编译不成功，编译总会报错本文假设你已经安装了nodeJs,这个很简单，去官网下载，稳定版和最新版，看你个人喜欢现在开始 1.准备工作，工具目前就下面这几个，已经够用了 node & npm python2.7 只能是python2.7 建议使用Git,没有Git 也可以直接下载...

Vue使用Serial连接串口

最新发布

03-13

当你在使用 Electron 和 Vue 3 打包后遇到 `SyntaxError: Cannot use import statement outside a module` 错误时，这通常是由于 JavaScript 文件未被正确识别为 ES 模块所导致的问题。下面是一些解决方案和建议来帮助你解决这个问题。 ### 解决方案 #### 1. 确保文件以 `.mjs` 结尾或配置 Babel/Webpack 如果你的代码中包含了ES6模块语法（如 `import/export`），你需要确保这些文件是以 `.mjs` 结尾或者是通过Babel/Webpack等工具转换成兼容的形式。对于大多数现代前端框架项目来说，通常会使用 Webpack 进行打包处理。 ##### 修改 Webpack 配置 (如果适用) 确保你的 Webpack 配置支持 ES Modules： ```javascript // vue.config.js 或 webpack.config.js 中添加或修改以下内容 module.exports = { output: { filename: '[name].bundle.js', libraryTarget: 'umd', // UMD 兼容各种模块化规范 globalObject: "typeof self !== 'undefined' ? self : this" }, experiments: { outputModule: true, // 启用实验性的 ESM 支持 } } ``` #### 2. 设置 Node.js 的 `type="module"` 从Node.js v12开始引入了一项新特性——能够将整个应用程序声明为“模块”。可以在项目的根目录下创建一个名为 `package.json` 的文件，并在里面加上 `"type": "module"` 字段： ```json { "name": "your-app-name", "version": "1.0.0", "main": "main.js", "type": "module" // 添加这一行 } ``` 注意：一旦启用了这个选项，所有导入都必须使用相对路径并且包含文件扩展名；此外，在某些版本的老式 CommonJS 插件上可能会有问题，因此最好是在新的干净环境中测试这种方法。 #### 3. 使用动态 `require()` 替代静态 `import` 对于那些不能作为 ES Module 加载的部分（例如第三方库或者老旧插件），你可以考虑改用基于CommonJS风格的动态 `require()` 函数而不是静态 `import` 表达式来进行懒加载。但是请注意这样做会使树摇算法失效，增加最终打包体积大小的风险。 ```javascript // 在运行时有条件地加载模块 let myDynamicModule; if (condition) { try { myDynamicModule = await import('./path/to/module'); } catch (err) { console.error(err); } } else { myDynamicModule = require('./path/to/commonJsModule'); } ``` #### 4. 检查渲染线程中的脚本标签类型如果是直接嵌入HTML文档里的 `<script>` 标签，记得给它们指定 `type="module"` 属性，以便让浏览器知道这是 ES 模块而不是普通的 <script> 脚本: ```html <script type="module" src="./src/main.ts"></script> ``` #### 5. 安装并配置合适的Polyfill/Babel Presets 有时即使做了上述更改仍然会在低版本JavaScript引擎上碰到类似错误，这时可以借助 [Babel](https://babeljs.io/) 将最新的 ECMAScript 特性向下编译至更广泛支持的标准。确保已经安装了必要的 preset/envs 并进行了适当配置。 ```bash npm install --save-dev @babel/preset-env babel-loader core-js regenerator-runtime ``` 然后更新 .babelrc 或者对应的配置文件: ```json { "presets": [ ["@babel/preset-env", { "useBuiltIns": "entry", "corejs": 3, "targets": "> 0.25%, not dead" }] ] } ``` 最后别忘了在入口文件顶部加入 polyfills 引用： ```typescript import "core-js/stable"; import "regenerator-runtime/runtime"; ``` --- 通过以上步骤你应该能够有效解决 `Cannot use import statement outside a module` 报错问题。如果有任何疑问或者其他具体的配置细节，请随时提问！