vue2项目vue-qrcode-reader 扫一扫二维码插件

vue2项目 vue-qrcode-reader 扫一扫二维码插件

    • 问题所在
    • 解决办法
    • 成功展示

问题所在

今天在引导师弟做扫二维码功能,发现通过npm install --save vue-qrcode-reade安装死活就是报错TypeError: Object...) is not a function
在这里插入图片描述

解决办法

百度了很多大牛的博客,得出个结论肯定是版本问题,然后又一股脑查度娘找到了vue2的适用的版本
npm install --save vue-qrcode-reader@3
参考了这位大佬链接

因是 vue2 版本所以根据官网提示 https://github.com/gruhn/vue-qrcode-reader 
How to make it work with Vue 2?
Support is dropped but you can downgrade to vue-qrcode-reader v3.* or lower.
大致意思:降级到vue-qrcode阅读器v3.*或更低版本。

然后就可以一股脑堆代码了

<template><div><div class="ku-scanner"><qrcode-streamv-show="qrcode":camera="camera":torch="torchActive"@decode="onDecode"@init="onInit">......</qrcode-stream></div></div>
</template>
<script>
// 引入
import { QrcodeStream } from "vue-qrcode-reader";export default {// 注册components: { QrcodeStream },......}
</script>

这位大佬链接里有详细的实现方法,如果打开页面错乱请f2在这里插入图片描述
走到这一步的时候还是不能正常运行的,还要对https进行处理具体解决是参考了这位大佬链接

注意:vue-qrcode-reader这个插件只适用于本地调试(localhost)或者带有https的域名,http是不能用
这个插件的可能调用摄像头存在隐私问题)。具体原因请查看官方文档解决办法 在vue框架中配置HTTPS的运行环境
在vue.config.js中进行如下配置:
// 配置反向代理devServer: {proxy: {'/api': {target: 'https://172.31.120.61:8080/',ws: true,changeOrigin: true,pathRewrite: {'^/api': ''}}},// 开启https 访问时使用https://172.31.120.61:8081 // https://localhost:8081 也能够访问,不过自带info请求会报错 不清楚具体缘由https: true}
配置完成之后重新运行,访问地址就会是 https 开头了 

成功展示

请添加图片描述
在这里插入图片描述

这就完美解决了扫一扫二维码获取信息的功能!
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/217670.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uniCloud(一) 新建项目、初始化服务空间、云对象访问测试

一、新建一个带有unicloud 二、创建一个服务空间 1. 右键uniCloud&#xff0c;关联云服务空间 我当前没有服务空间&#xff0c;需要新建一个服务空间&#xff0c;之后将其关联。初始化服务空间需要的时间有点长 服务空间初始化成功后&#xff0c;刷新HBuilder&#xff0c;勾选…

0012Java安卓程序设计-ssm记账app

文章目录 **摘要**目 录系统设计5.1 APP端&#xff08;用户功能&#xff09;5.2后端管理员功能模块开发环境 编程技术交流、源码分享、模板分享、网课分享 企鹅&#x1f427;裙&#xff1a;776871563 摘要 网络的广泛应用给生活带来了十分的便利。所以把记账管理与现在网络相…

CanEasy多场景应用,让汽车总线测试更简单

来源&#xff1a;虹科汽车电子 虹科分享 | CanEasy多场景应用&#xff0c;让汽车总线测试更简单 原文链接&#xff1a;https://mp.weixin.qq.com/s/ojic4xfVTLbxXcKlJMGQZw 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; 导读 CanEasy是一个基于Windows的总线工具&…

ChatGPT对话为什么不用WebSocket而使用EventSource?

文章目录 1. 引言2. WebSocket和EventSource简介2.1 WebSocket2.2 EventSource 3. ChatGPT对话系统的特点4. EventSource的优势4.1 简单易用4.2 容错性强4.3 兼容性良好 5. 为何选择EventSource而非WebSocket&#xff1f;5.1 单向通信模式5.2 长轮询模式5.3 简化部署和维护 6. …

二叉搜索树的简单理解

1. 二叉搜索树 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树&#xff0c;或者是具有以下性质的二叉树&#xff1a; 若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值 若它的右子树不为空&#xff0c;则右子树上所有节点的值都大于根节点的值 它…

监听器中GUI的理解

文章目录 前言一、Panel窗口关闭Demo总结 前言 比如登录拦截&#xff1a;用户登录后&#xff0c;会被拦截掉。就可以用监听器来处理。 一、Panel窗口关闭Demo 先创建一个窗口&#xff0c;发现点击关闭后&#xff0c;关闭不掉&#xff0c;就要添加监听事件&#xff1a; pub…

The method show() from the type Window is deprecated

java.awt.Window.show() java.awt.Component.setVisible(true); Window.show() java.awt.JFrame java.awt.Frame java.awt.Windows java.awt.Component.setVisible(true);

亿赛通电子文档安全管理系统 SQL注入漏洞复现

0x01 产品简介 亿赛通电子文档安全管理系统&#xff08;简称&#xff1a;CDG&#xff09;是一款电子文档安全加密软件&#xff0c;该系统利用驱动层透明加密技术&#xff0c;通过对电子文档的加密保护&#xff0c;防止内部员工泄密和外部人员非法窃取企业核心重要数据资产&…

Elasticsearch:为现代搜索工作流程和生成式人工智能应用程序铺平道路

作者&#xff1a;Matt Riley Elastic 的创新投资支持开放的生态系统和更简单的开发者体验。 在本博客中&#xff0c;我们希望分享 Elastic 为简化你构建 AI 应用程序的体验而进行的投资。 我们知道&#xff0c;开发人员必须在当今快速发展的人工智能环境中保持灵活性。 然而&a…

联邦蒸馏中的分布式知识一致性 | TIST 2024

联邦蒸馏中的分布式知识一致性 | TIST 2024 联邦学习是一种隐私保护的分布式机器学习范式&#xff0c;服务器可以在不汇集客户端私有数据的前提下联合训练机器学习模型。通信约束和系统异构是联邦学习面临的两大严峻挑战。为同时解决上述两个问题&#xff0c;联邦蒸馏技术被提…

激活Windows过程及报错解决: 0x803f7001 在运行Microsoft Windows 非核心版本的计算机上, 运行“ slui.exe 0x2a 0x803f7001 “以显示错误文本

激活Windows过程及报错问题解决: 0x803f7001 在运行Microsoft Windows 非核心版本的计算机上&#xff0c;运行“ slui.exe 0x2a 0x803f7001 “以显示错误文本。 前言 最近在激活Windows过程中&#xff0c;遇到了报错: 0x803f7001 在运行Microsoft Windows 非核心版本的计算机上…

人工智能|深度学习——知识蒸馏

一、引言 1.1 深度学习的优点 特征学习代替特征工程&#xff1a;深度学习通过从数据中自己学习出有效的特征表示&#xff0c;代替以往机器学习中繁琐的人工特征工程过程&#xff0c;举例来说&#xff0c;对于图片的猫狗识别问题&#xff0c;机器学习需要人工的设计、提取出猫的…

Axure的使用

1.Axure是什么&#xff1f;&#xff1f;&#xff1f; Axure是一款功能强大的原型设计工具&#xff0c;它可以让用户快速地创建交互式原型&#xff0c;并针对原型进行测试和改进。Axure的主要特点包括可定制的界面元素库、交互动画效果、条件逻辑、团队协作等功能&#xff0c;适…

LabVIEW开发远程结构健康监测系统

LabVIEW开发远程结构健康监测系统 工程师依赖于振动监测来评估建筑物、桥梁和其他大型结构的完整性。传统的振动监测工具在数据收集上存在限制&#xff0c;无法长时间收集高保真波形。随着内存存储、处理器速度和宽带无线通信技术的进步&#xff0c;出现了对能够长时间收集并实…

Spark与PySpark(1.概述、框架、模块)

目录 1.Spark 概念 2. Hadoop和Spark的对比 3. Spark特点 3.1 运行速度快 3.2 简单易用 3.3 通用性强 3.4 可以允许运行在很多地方 4. Spark框架模块 4.1 Spark Core 4.2 SparkSQL 4.3 SparkStreaming 4.4 MLlib 4.5 GraphX 5. Spark的运行模式 5.1 本地模式(单机) Local运行模…

《PCL多线程加速处理》-滤波-统计滤波

《PCL多线程加速处理》-滤波-统计滤波 一、效果展示二、实现方式三、代码一、效果展示 提升速度随着点云越多效果越明显 二、实现方式 1、原始的统计滤波实现方式 #include <pcl/filters/statistical_outlier_removal.h>pcl::PointCloud<pcl::PointXYZ

vue2-elementUI部分组件样式修改

el-radio样式&#xff1a; /deep/ .el-radio__input .el-radio__inner {width: 20px;height: 20px;position: relative;cursor: pointer;-webkit-appearance: none;-moz-appearance: none;appearance: none;border: 1px solid #999;border-radius: 0;outline: none;transition…

【C语言】超详解strncpystrncatstrncmpstrerrorperror的使⽤和模拟实现

&#x1f308;write in front :&#x1f50d;个人主页 &#xff1a; 啊森要自信的主页 ✏️真正相信奇迹的家伙&#xff0c;本身和奇迹一样了不起啊&#xff01; 欢迎大家关注&#x1f50d;点赞&#x1f44d;收藏⭐️留言&#x1f4dd;>希望看完我的文章对你有小小的帮助&am…

张驰课堂:如何应用六西格玛法则优化你的工作流?

作为职场发展的坚实支柱&#xff0c;六西格玛不仅是企业提质增效的利器&#xff0c;同时也是那些渴望在职业生涯中脱颖而出的专业人士的的秘密武器。以下是通过培养个人技能&#xff0c;借助六西格玛优化工作与人生的途径。 团队合作&#xff1a;聚沙成塔的力量 六西格玛教我…

SQL进阶理论篇(四):索引的结构原理(B树与B+树)

文章目录 简介如何评价索引的数据结构设计好坏二叉树的局限性什么是B树什么是B树总结参考文献 简介 我们在上一节中说过&#xff0c;索引其实是一种数据结构&#xff0c;那它到底是一种什么样的数据结构呢&#xff1f;本节将简单介绍一下几个问题&#xff1a; 什么样的数据结…