Vue2前端生成二维码并实现扫码跳转：安装qrcode及避坑指南

脚本专家

在Vue2项目中，经常需要在前端生成二维码，让用户手机扫码后自动跳转到指定页面，例如活动推广、H5入口、扫码登录或分享邀请页。本文记录基于qrcode库的完整实现方法，同时整理URL路径、localhost扫码失败、微信限制等常见坑点。

实现原理很简单：前端生成的二维码内容实质上是一个完整URL字符串，手机扫码后自动识别该URL并调用浏览器打开。因此核心工作就是使用JavaScript库将目标URL编码成二维码Canvas或图片。

一、安装依赖
推荐使用轻量库qrcode，运行命令：

2. npm install qrcode

复制代码

安装完成后即可在Vue组件中导入使用。

二、基础实现（Canvas渲染）
使用QRCode.toCanvas方法将URL渲染到<canvas>元素。以下为Vue2组件完整代码：

2. <template>
3.   <div>
4.     <canvas ref="qrcodeCanvas"></canvas>
5.   </div>
6. </template>
8. <script>
9. import QRCode from "qrcode";
11. export default {
12.   name: "QrCodeDemo",
13.   mounted() {
14.     this.generateQRCode();
15.   },
16.   methods: {
17.     generateQRCode() {
18.       const url = "https://www.baidu.com"; // 扫码后跳转的地址
19.       QRCode.toCanvas(
20.         this.$refs.qrcodeCanvas,
21.         url,
22.         {
23.           width: 200,   // 生成二维码的宽度（像素）
24.           margin: 2     // 边距（模块数）
25.         },
26.         function (error) {
27.           if (error) console.error(error);
28.           console.log("二维码生成成功！");
29.         }
30.       );
31.     }
32.   }
33. };
34. </script>

复制代码

页面加载后自动生成二维码。用户扫码即可打开https://www.baidu.com。

三、进阶用法：动态带参二维码与图片输出
若需要为不同用户或场景生成不同跳转链接，可拼接动态参数：

2. const url = `https://yourdomain.com/page?id=123&type=vue`;
3. QRCode.toCanvas(this.$refs.qrcodeCanvas, url, { width: 200 }, callback);

复制代码

适用于活动分享、用户邀请等个性化场景。

如需直接在页面中以<img>标签展示二维码，可使用toDataURL方法将二维码转为Base64图片：

2. <template>
3.   <img :src="qrCodeUrl" />
4. </template>
6. <script>
7. import QRCode from "qrcode";
8. export default {
9.   data() {
10.     return {
11.       qrCodeUrl: ""
12.     };
13.   },
14.   mounted() {
15.     QRCode.toDataURL("https://www.baidu.com").then(url => {
16.       this.qrCodeUrl = url;
17.     });
18.   }
19. };
20. </script>

复制代码

注意：toDataURL返回的是Data URL，可直接赋给<img>的src属性。

四、常见问题与避坑指南
1. URL必须为完整路径
   二维码内容若填写相对路径如“/page?id=1”，手机扫码后无法解析为有效HTTP请求，必须写完整协议+域名+路径：
  

2. https://yourdomain.com/page?id=1

复制代码

2. localhost无法被手机扫码访问
   若二维码内容为http://localhost:8080，手机与电脑在同一网络也无法访问，因为localhost指向手机自身的回环地址。
   解决方案：改用电脑的局域网IP，如http://192.168.1.100:8080，或直接部署到服务器。
3. 微信扫码限制
   - 非HTTPS链接在微信中扫码可能被拦截。
   - 某些未备案域名会提示风险。
   建议：统一使用HTTPS，并确保域名已备案且无安全风险。

五、总结
借助qrcode库，Vue2前端生成二维码仅需几行代码，关键是正确提供完整URL。注意开发环境使用局域网IP替代localhost，生产环境使用HTTPS域名。对于需要动态传递参数的场景（如用户ID），用模板字符串拼接URL即可。上述代码可直接嵌入Vue2项目中使用。

热心网友2

感谢楼主分享这么详细的教程！之前用vue-qr插件总觉得体积大，换成qrcode确实清爽很多。想请问一下，如果二维码里包含带中文的URL参数，需要先encodeURIComponent吗？还是qrcode会自动处理？另外，局域网IP方案在生产环境肯定不行，但开发调试时确实很实用，这个坑点总结到位。