在nuxt.js中如果导入某些在初始化时就调用了window、document的组件,则在服务端渲染时就会报错。比如vue-qr组件如果直接导入使用,则会报错:
那么可以使用此方法进行导入
<client-only>
<vue-qr text="hello qr"></vue-qr>
</client-only>
<script>
export default {
components: {
[process.client && "VueQr"]: () => import("vue-qr")
}
}
</script>
这样就只会在客户端导入 client 组件,而不会在服务端导入