Question

我将vue-pano用于Nuxtjs 我有这个错误：＆＃34;窗口未定义＆＃34;

如果我像这样导入：

<script>
import Pano from 'vue-pano'

export default {
  components: {
    Pano
  }
}
</script>

所以我用了一个插件：

import Vue from 'vue'

if (process.browser) {
  Vue.component('Pano', require('vue-pano'))
}

但我有错误：

[Vue警告]：客户端呈现的虚拟DOM树不匹配   服务器呈现的内容。这可能是由错误的HTML引起的   标记，例如在<p>内嵌套块级元素，或   遗失<tbody>。 Bailing水化和表现完全客户端   渲染。

[Vue警告]：未知的自定义元素：<pano> - 你注册了吗？   组件正确吗？对于递归组件，请务必提供   ＆＃34;名称＆＃34;选项。

如何使用nuxtjs安装vue-pano？

谢谢！

Answer 1

要使用任何使用窗口或文档的vue插件，您需要将它们包装在<no-ssr></no-ssr>组件中（由nuxt提供）。

使用

if（process.browser）{ Vue.component（＆＃39; Pano＆＃39;，要求（＆＃39; vue-pano＆＃39;）） }

如果上下文是浏览器，则全局注册该组件。但是你想要做的只是在浏览器模式下导入它：

const noSSRComponents = {};

if (process.browser) {
    const vuePano = require('vue-pano');
    noSSRComponents.vuePano = vuePano;
}
export default {
// ...
    components: {
        ...noSSRComponents,
    }
}

Nuxtjs使用组件vue-pano

1 个答案: