vue2里生成二维码，为啥选vue qrcode？

做vue2项目时，想给页面加个二维码功能，比如让用户扫一下跳转链接、保存订单信息，这时候咋用工具生成二维码？vue - qrcode是vue生态里专门做二维码生成的组件，对vue2友好又好上手，今天就从安装到自定义，把vue2里用vue - qrcode的门道聊透～

不是所有二维码工具都适合vue2项目，有些纯JS库（比如qrcode.js）得手动操作DOM，在vue的响应式体系里容易踩坑；而vue - qrcode是为vue量身打造的组件，和vue2的生命周期、数据绑定无缝配合。

它本身轻量，打包后对项目体积影响极小，还支持灵活配置——改二维码颜色、加圆角、放logo、调整尺寸这些需求，用组件属性就能实现，要是项目只需要“生成”二维码（不需要扫码识别这类“解析”功能），选它准没错。

举个实际场景：做电商项目的“订单分享”功能，用户点按钮生成带订单号的二维码，朋友扫码直接进订单详情页，vue - qrcode能快速把订单链接转成二维码，还能自定义样式让二维码和品牌风格统一，比自己折腾DOM省心多了。

vue - qrcode在vue2中怎么安装？

先把组件装到项目里，用包管理工具最方便：

若用npm，打开终端执行：

npm install vue - qrcode --save

要是习惯yarn，就输：

yarn add vue - qrcode

装完后有两种引入方式：

全局注册（整个项目都能直接用

打开main.js，添加以下代码：

import Vue from 'vue'
import Qrcode from 'vue - qrcode'
Vue.component('Qrcode', Qrcode)

局部注册（只在某个组件里用）

在需要的.vue文件里，script部分这么写：

import Qrcode from 'vue - qrcode'
export default {
  components: { Qrcode },
  // ...其他代码
}

注意：vue - qrcode对vue2的支持主要在1.x版本，安装时别误装适配vue3的版本（比如2.x+），否则会报兼容性错误，装完后可查看package.json里的版本，确保是"vue - qrcode": "^1.7.0"左右（版本号随时间可能变化，核心是支持vue2）。

最基础的二维码生成咋实现？

装好了组件，写个最简单的例子试试，比如做个“扫我跳转官网”的二维码：

新建QrDemo.vue组件，代码如下：

<template>
  <div class="qr - box">
    <!-- 核心是qrcode组件，绑定content和size -->
    <qrcode 
      :content="qrContent" 
      :size="200" 
    />
  </div>
</template>
<script>
import Qrcode from 'vue - qrcode'
export default {
  components: { Qrcode },
  data() {
    return {
      qrContent: 'https://www.xxx.com' // 要编码的内容，链接、文字都行
    }
  }
}
</script>
<style scoped>
.qr - box {
  margin: 20px auto;
  width: 200px;
}
</style>

保存后页面会出现一个200px的二维码，用手机扫就能打开设置的链接，这里核心属性是content（必填，放要转成二维码的内容，可是网址、文字、JSON字符串等）和size（选填，控制二维码尺寸，单位px）。

若没显示二维码，先检查两点：一是content是否有值（空内容生成不了）；二是组件是否正确注册（全局或局部注册漏了的话，会被当普通元素）。

想改样式、加logo，怎么自定义？

默认黑白二维码太单调？想加品牌logo？这些需求通过属性配置就能实现：

改颜色、加圆角

二维码的前景色（码眼和线条）、背景色可自定义，还能加圆角让风格更柔和，修改组件属性：

<qrcode 
  :content="qrContent" 
  :size="250" 
  foreground="#ff6600" // 前景色，替换默认黑色
  background="#fef9e7" // 背景色，替换默认白色
  :radius="10" // 圆角，单位px，让二维码四角更圆润
/>

这样生成的二维码会变成橙底浅黄背景，还有圆角，风格能和品牌呼应。

加logo图片

很多场景需要在二维码中间放logo（比如品牌图标），vue - qrcode支持用slot插入图片：

<qrcode 
  :content="qrContent" 
  :size="250" 
  :logo - size="50" // logo尺寸，别太大否则扫码失败
>
  <img 
    slot="logo" 
    src="@/assets/logo.png" 
    alt="logo" 
    style="width: 50px; height: 50px;"
  >
</qrcode>

这里logo - size要和img尺寸对应，否则会变形，logo别太大，否则二维码容错率不够，手机扫不出来，若要精细控制logo位置、层级，还能自己写个div当覆盖层，用绝对定位放在二维码中间。

遇到生成失败、样式不生效咋排查？

使用时难免碰到问题，这几个常见“坑”要注意：

问题1：二维码空白，没内容

十有八九是content没值！比如content是异步从接口拿的，组件渲染时content还是空，解决方法：用v - if控制组件加载时机，等content有值了再渲染：

<template>
  <div>
    <qrcode 
      v - if="qrContent" 
      :content="qrContent" 
      :size="200" 
    />
  </div>
</template>

问题2：样式属性不生效

比如改了foreground颜色没变化，看看是不是用了scoped样式导致穿透失败，vue的scoped样式会给元素加data - v - xxx属性，组件内部样式可能被隔离，这时用/deep/（或>>>）穿透：

<style scoped>
/deep/ .qrcode - canvas {
  /* 这里写对二维码canvas的样式修改 */
}
</style>

或者把样式写在全局样式文件（比如main.css）里，别用scoped。

问题3：扫码识别失败

除了logo太大，还要看容错等级，vue - qrcode有个error - correction - level属性，可选值是'L'（7%容错）、'M'（15%）、'Q'（25%）、'H'（30%），如果logo大或二维码要打印后扫描，选'H'容错更高：

<qrcode 
  :content="qrContent" 
  error - correction - level="H" 
  :logo - size="60" 
/>

能不能结合后端接口生成动态二维码？

实际项目里，二维码内容常由后端提供（比如用户专属邀请链接、订单状态码），这时要结合接口请求，步骤如下：

调接口拿动态内容

用axios发请求，比如获取用户邀请链接：

import axios from 'axios'
export default {
  data() {
    return {
      inviteLink: ''
    }
  },
  mounted() {
    this.getInviteLink()
  },
  methods: {
    async getInviteLink() {
      try {
        const res = await axios.get('/api/user/invite - link')
        this.inviteLink = res.data.link // 后端返回的专属链接
      } catch (err) {
        console.error('获取链接失败', err)
      }
    }
  }
}

把接口数据传给qrcode组件

和之前解决异步的思路一样，用v - if确保有值再渲染：

<template>
  <div>
    <qrcode 
      v - if="inviteLink" 
      :content="inviteLink" 
      :size="220" 
      foreground="#2ecc71" 
    />
    <p v - else>加载中...</p>
  </div>
</template>

这样用户进入页面时，先调接口拿链接，拿到后再生成二维码，就不会出现内容为空的情况，要是想让二维码“刷新”（比如用户点按钮重新生成），可以把请求逻辑放方法里，点击时调用，再更新content。

折腾一圈下来，会发现vue - qrcode在vue2项目里生成二维码真的很丝滑——从安装到自定义，再到处理异步和排错，每一步都有明确解法，要是你项目里还有更复杂的需求，比如让二维码支持长按保存、结合路由参数动态变化，也能基于vue - qrcode拓展功能（比如用html2canvas把二维码转成图片给用户下载），先把基础用法吃透，再结合业务场景发挥创意,二维码功能就能成为项目里的加分项啦～