Nuxtjs 使用组件 vue-pano答案

【问题标题】：Nuxtjs use component vue-panoNuxtjs 使用组件 vue-pano
【发布时间】：2018-08-19 01:53:29
【问题描述】：

我用vue-pano 和Nuxtjs 我有这个错误：“窗口未定义”

如果我这样导入：

<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> - 你注册了组件正确吗？对于递归组件，请确保提供 “名称”选项。

如何使用 nuxtjs 安装 vue-pano？

谢谢！

【问题讨论】：

我认为这是Pano 的问题，他们可能在发布 dist 时没有预编译模板。如果是这样，解决方案是在他们的仓库中打开一个问题并要求他们这样做。

标签： javascript vue.js nuxt.js

【解决方案1】：

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

有

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

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

const noSSRComponents = {};

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

【讨论】：