vuepress引入vue-qr组件后build报错navigator is not defined问题

2020-09-11 12:17:26

记下vuepress引入外部组件后build报错问题

最近博客中集成了vue-qr组件用于生成访问的二维码.

组件安装

npm install vue-qr

自定义组件代码

Qrcode.vue


<template>
  <div class="vue-qrcode-box">
    <vue-qr :text="qrUrl" :size="114" :margin="5"></vue-qr>
  </div>
</template>

<script>
import vueQr from 'vue-qr'
export default {
  name: 'qr-code',
  components: {
    vueQr
  },
  data() {
    return {
      qrUrl: ''
    }
  },
  mounted: function() {
    const that = this
    setTimeout(() => {
      that.qrUrl = location.origin + that.$route.path
    }, 0)
  },
  watch: {
    $route(to, from) {
      if (from.path != to.path) {
        this.qrUrl = location.origin + this.$route.path
      }
    }
  },
  methods: {},
  created() {}
}
</script>

<style scoped>
.vue-qrcode-box img {
  width: 100%;
}
</style>

组件引用

如果直接引入会报如下错误

原因:所有的页面在生成静态 HTML 时都需要通过 Node.js 服务端渲染,所有的 Vue 相关代码都应当遵循 编写通用代码 的要求。
要确保只在 beforeMount 或者 mounted 访问浏览器 / DOM 的 API。

如果一些组件或库在导入时就试图访问浏览器 API ,需要在合适的生命周期钩子中动态导入。

这里引用的 vue-qr 应该是使用了 navigator 的 API,所以就选择在单页的mounted里动态引入的方式来解决构建时的报错问题:


<template>
  <component v-if="qrcode" :is="qrcode"></component>
</template>
<script>
export default {
  data() {
    return {
      qrcode: null
    }
  },
  mounted () {
    import('./Qrcode').then(module => {
      this.qrcode = module.default
    })
  }
}
</script>

效果

参考资料

本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码
微信小程序

评 论:

好文推荐
微信扫码关注
加入百人技术交流群
探讨前端、小程序开发及逆向、微信开发...
一起学习,共同成长
微信情报 更多 >
    每天进步一点点~