收到需求要生成二维码的时候刚进项目组不久，接触vue也才一两个星期，还处于懵逼状态。
本小白的第一反应就是百度二维码的生成方法，网上有很多大神给出解决方案，最开始本小白以为是在后台生成图片然后传到前台页面，后来发现可以直接在前端用js生成，网上查到的大部分都是用jquery.qrcode.js配合utf.js(为了支持中文)和jquery-1.8.0.js来实现，亲测可行(但本白只在原生HTML中实现，vue中死活报错：“找不到qrcode方法”，是不是本小白没找准姿势，哪位大神求告知！)如下图：
这是生成出来的二维码：
到这里问题还是没有解决，于是又继续找，发现一位大神的博客指了条明路：使用 vue-qart 和 vue-qr 这两个插件(插件使用前记得先安装：npm install vue-qr 有cnpm最好用cnpm install vue-qr，本小白最开始用npm结果炸了，换cnpm才好)可以实现。这里本小白就用的vue-qr，为了这一功能能够复用，先写了一个组件，供其他页面调用：
附上代码：
1 <template>
2 <el-dialog :width= "dlgWidth" :title="title" :visible.sync="visible" :close-on-click-modal="false" @close="closePanel">
3 <div id="qrcodeId" style="width: 200px; height: 250px; margin-left:70px; margin-top:30px">
4 <vue-qr :text="config.value" :logoSrc="config.imagePath" :size="200" :margin="0"></vue-qr>
5 </div>
6 </el-dialog>
7 </template>
8
9 <script>
10 import VueQr from ‘vue-qr‘
11
12 export default {
13 components: { VueQr },
14 props: ["show"],
15 data() {
16 return {
17 title: "扫描二维码下载APP",
18 visible: this.show,
19 dlgWidth: _const.POPWND_SMALL_WIDTH,
20 config: {
21 value: ‘‘,//显示的值、跳转的地址
22 imagePath: require(‘@/images/logo.png‘)//中间logo的地址
23 }
24 };
25 },
26 methods: {
27 initQRCode(qrcodeUrl) {
28 this.config.value = qrcodeUrl;
29 },
30 closePanel()
31 {
32 this.$emit(‘update:show‘,false);
33 }
34 },
35 watch: {
36 show(val) {
37 this.visible = val;
38 }
39 }
40 }
41 </script>
组件代码
调用上面的组件：
父页面中触发二维码生成现实的方法：
满心欢喜写完了，结果二维码根本没出来，按照大神的博客里说的去掉logSrc确实可以生成出二维码，但是图片的问题依然没解决，一开始以为是路径问题，换了几个图片突然成功了，于是本小白又按照同样的方式将目标图片路径放进去，结果还是不行，但是后来发现同一个文件夹里的另外一个图片可以显示出来，又试了几个其他图片，也是有的能显示有的不能，我就开始怀疑是不是图片大小有要求，连续用大小不同的图片尝试多次后，我肯定了这个猜想，经过多次测试，发现这个临界值在10000字节左右，只能显示10000字节以内的图片。
问题找到了，现在只能将目标图片压缩一下，找了个网站压缩后图片的效果跟原图很接近，连续压缩了好几遍才达到要求，这里是本白压缩图片的网站，大神们有其他更好更便捷的网站可以分享一下嘛？3Q。
纯小白，若有错误，欢迎大神批评指点！！！明天还要加班，洗洗睡了，狗命要紧！
原文地址：https://www.cnblogs.com/99ll/p/10181611.html