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

Posted 2021-04-16 极客之路

点击蓝字 关注我们

最近博客中集成了vue-qr组件用于生成访问的二维码，记下vuepress引入外部组件后build报错问题的解决方法。

组件安装

 
   
   
 

  
    
    
  
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>

效果

参考资料

• 浏览器的 API 访问限制：https://vuepress.vuejs.org/zh/guide/using-vue.html#%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84-api-%E8%AE%BF%E9%97%AE%E9%99%90%E5%88%B6

• 编写通用代码的要求：https://ssr.vuejs.org/zh/guide/universal.html

觉得这篇文章有帮助？请转发给更多人

关注 极客之路 加星标，每天进步一点点