nuxt框架中使用qrcodejs2页面刷新报document is not defined

框架中使用qrcodejs2页面刷新报document is not defined"/>

nuxt框架中使用qrcodejs2页面刷新报document is not defined

因为要实现网页上分享微信，微博，qq空间功能，第一次写这个功能，刚开始实现起来还是有点棘手的，后面好不容易解决了，居然还存在一个刷新的bug，又忙不迭的却解决。。。。

好了先说说这个分享的实现吧
首先是先把这部分内容组件分装(所需图片就不放了)
share.vue

<template><div class="share">分享到<div class="icon"><img src="../../static/revision_new/product/share_1.png" @click="toWechat"><img src="../../static/revision_new/product/share_2.png" @click="toWeibo"><img src="../../static/revision_new/product/share_3.png" @click="toQQzone"></div><div class="wx-box" v-if="isWxBoxShow"><div style="width:190px;margin-left:10px;"><div id="qrcode" ref="qrcode"></div><p>用微信扫描二维码<br>分享至好友和朋友圈</p><span @click="isWxBoxShow = false"></span></div></div></div>
</template><script>
// import QRCode from 'qrcodejs2'
export default {name: "share",components:{},props:{},data() {return {isWxBoxShow:false,shareUrl:'',shareUrlH5:'',shareTitle:''}},mounted() {this.isWxBoxShow = false},watch:{$route(to, from) {this.isWxBoxShow = false}},methods:{getValue(shareUrl,shareUrlH5,shareTitle){this.shareUrl = shareUrlthis.shareUrlH5 = shareUrlH5this.shareTitle = shareTitle},toWechat() {if(!this.isWxBoxShow){this.isWxBoxShow = truethis.$nextTick(() => {this.qrcode()})}},qrcode(){console.log(this.shareUrlH5)let qrcode = new QRCode('qrcode', {width: 80, // 设置宽度，单位像素height: 80, // 设置高度，单位像素text: this.shareUrlH5 // 设置二维码内容或跳转地址})},toWeibo() {let url = encodeURIComponent(this.shareUrl)let title = encodeURIComponent(this.shareTitle)window.open(`.php?url=${url}&title=${title}`)// window.open(`.php?url=${url}&title=${title}&pic=&appkey=&sudaref=`)},toQQzone() {let url = encodeURIComponent(this.shareUrl)let title = encodeURIComponent(this.shareTitle)window.open(`=${url}&title=${title}`)// window.open(`=${url}&title=${title}&desc=${title}&summary=${title}&site=${url}`)},}
}
</script><style lang="less" scoped>.share {position: relative;.icon {display: inline-block;img {width: 22px;cursor: pointer;margin-left: 5px;vertical-align: bottom;}}.wx-box {position: absolute;width: 220px;height: 110px;left: -62px;bottom: 27px;padding: 10px 0;background: url("../../static/revision_new/product/share_wx_arrow.gif") no-repeat;background-size: 100% 100%;z-index: 20000;#qrcode {float: left;width: 80px;}p {text-align: center;font-size: 14px;}span {display: inline-block;position: absolute;top: 0;right: 0;width: 25px;height: 25px;cursor: pointer;}}}
</style>

父组件（分享内容部分的代码）

<div class="cursor-pointer flex-container-row flex-align-center" style="position: relative;" 
@mouseover="show" @mouseleave="leaveTop"><img src="../../static/revision_new/product/share.png"><span class="textSimpleInfo" style="margin-left: 10px;">分享</span> <transition><div class="share-items" @mouseover="isOnleft = true" @mouseleave="leave":class="[ isShow==true? 'show-share':'hidden-share']" v-show="isShow"><div class="share-items-inner"><share ref="share" /></div></div></transition>
</div><script>export default{data(){return{isShow: false,     // 判断分享途径是否展示，false隐藏，true显示isOnleft: false,   // 悬浮分享图标显示分享途径shareTitle:'',shareUrl:'',shareUrlH5:'',}},watch: {// 监听路由，重新加载数据$route (to, from) {this.shareUrl = window.location.hrefthis.shareUrlH5 = '移动端地址'if(to.query.detail != from.query.detail){this.$refs.share.getValue(this.shareUrl,this.shareUrlH5,this.shareTitle);}}},methods(){leaveTop() {window.setTimeout(() => {if (!this.isOnleft) {this.isShow = false;}}, 500)},leave() {this.isShow = false;this.isOnleft = false;},show() {this.isShow = true;},}}
</script>

到这里基本上就能实现功能了（所帖的代码重要的都在上面了）

下面这个问题是记录页面刷新报document is not defined的问题的

解决方式如下：
在 plugins目录下创建一个qrcodejs2的js文件，例如qrcode.js，内容如下：

import Vue from 'vue'
const VueQrcode = require('qrcodejs2')
Vue.prototype.$RCode = VueQrcode;

然后在nuxt.config.js中引用：

module.exports = {plugins: [{ src: '~/plugins/qrcode.js', ssr: false }]
}

上述 { src: ‘~/plugins/qrcode.js’, ssr: false }说明这个plugin仅在客户端使用，从而避免在服务器端使用插件访问document对象而导致的错误。

将其在Vue组件中如下方式导入使用：

let qrcode = new this.$RCode('qrcode',{width: 80, // 设置宽度，单位像素height: 80, // 设置高度，单位像素text: '' // 设置二维码内容或跳转地址})

这样bug就可以解决了，二维码也能正常显示了