vue有两种生成二维码的方式，qrcode、vue-qr（有icon）

1. qrcode

npm i qrcodejs2 --save

<div class="qrcode" ref="qrCodeUrl"></div>
<script>
import QRCode from 'qrcodejs2'
export default {
  data() {
    return {
  },
  methods: {
    getTokenQrcode(){
                getTokenQrcode().then(res=>{
                    if(res.data.code==0){
                        let ticket=res.data.data.ticket
                        let scheme=res.data.data.scheme
                        let hostname=res.data.data.hostname
                        this.$nextTick(function(){
                            this.creatQrCode(JSON.stringify({
                                ticket:ticket,
                                hostname:hostname,
                                scheme:scheme
                            }))
                        })
                    }
                }).catch(()=>{
                    
                })
            },
            creatQrCode(url) {
                this.$refs.qrCodeUrl.innerHTML = ""//词句代码将之前的二维码清空了
                var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                    text: url, // 需要转换为二维码的内容
                    width: 230,
                    height: 230,
                    colorDark: '#000000',
                    colorLight: '#ffffff',
                    correctLevel: QRCode.CorrectLevel.H
                })
            },
},
mounted() {
    this.getTokenQrcode();
},
};
</script>

npm i vue-qr --save

<vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/weixin_42601136" :size="200"></vue-qr>
 
<script>
    export default {
        name: "qecode",
        data() {
            return {
                imageUrl: require("../img/logo.png"),//icon路径
            }
        },
        components: {
            vueQr
        },
    },
}
</script>

参考链接：
博客：https://blog.csdn.net/weixin_42601136/article/details/114839489
qrcode：https://github.com/davidshimjs/qrcodejs
vue-qr：https://github.com/Binaryify/vue-qr#readme