Nuxtjs 使用组件 vue-pano

Posted 2023-02-22

【中文标题】Nuxtjs 使用组件 vue-pano

【英文标题】：Nuxtjs use component 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 时没有预编译模板。如果是这样，解决方案是在他们的仓库中打开一个问题并要求他们这样做。

【参考方案1】：

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

有

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

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

const nos-s-rComponents = ;

if (process.browser) 
    const vuePano = require('vue-pano');
    nos-s-rComponents.vuePano = vuePano;

export default 
// ...
    components: 
        ...nos-s-rComponents,