前言

我的项目原本是vue写的，用npm的方法引用了qrcode就可以直接使用的，但是后来项目改造使用了nuxt（服务器端渲染，利于SEO），这样原本的的使用方法就会报错了，于是找到了一个好方法（参考文章：https://www.cnblogs.com/djjlovedjj/p/10283131.html），记录一下。
[报错如下]

报错截图

使用步骤

下载qrcode.min.js，链接: https://pan.baidu.com/s/1oAVaV5J7oygme55WvUlumA 提取码: cde4
将qrcode.min.js文件放到项目的static目录下的js文件夹里（static目录下的文件不会被编译），本地启服务http://127.0.0.1:3000/js/qrcode.min.js就是该文件，部署之后就是https://www.XXXX.com/js/qrcode.min.js
在nuxt.config.js配置文件里配置head里的script对象：

nuxt.config.js

head: {
    title: '啦啦啦啦',
    meta: [
   
    ],
    link: [
      
    ],
    script: 
    [
      {
        src: 'https://www.XXXX.com/js/qrcode.min.js'
      }
    ]  
  },

我是做的一个新闻页分享功能，用法很简单

newsDetail.vue

<div id="qrcode"></div>

mounted () {
  this.QRCode();
},

QRCode() {
    let qrcode = new QRCode('qrcode',{
        text: window.location.href,
        width: 200,
        height: 200,
        colorDark: '#000000',
        colorLight: '#ffffff', 
        correctLevel: 3          
    })
}

具体用法可以看看文档：http://code.ciaoca.com/javascript/qrcode/

nuxt项目中使用qrcode

nuxt项目中使用qrcode

前言

使用步骤