Question

我有一个用于渲染缩略图集合的全局组件。该全局组件使用Glightbox库打开/查看图像。但是，它在服务器端不起作用，因为它会检查浏览器/导航器。但是想知道渲染服务器端时如何禁用/排除使用glightbox吗？

这是我的组成部分：

<template>
  <div v-if="items.length > 0" class="gallery">
    <div v-for="(item, myindex) in items" :key="myindex" class="thumbcontainer">
      <a :href="item.source.version_900x900.url" :class="setLightBoxClass()">
        <div
          v-lazy:background-image="item.source.version_250x250.url"
          class="innerthumb"
          style="--aspect-ratio:1.33"
        />
      </a>
    </div>
  </div>
</template>

<script>
import GLightbox from 'glightbox'

export default {
  name: 'BaseGallery',
  inheritAttrs: false,
  props: {
    items: Array,
    galleryId: Number
  },
  data() {
    return {
      lightbox: undefined
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.initLightBoxes()
    })
  },
  methods: {
    setLightBoxClass() {
      return {
        glightbox: true,
        ['glightbox-' + this.galleryId]: true,
        thumblink: true
      }
    },
    initLightBoxes() {
      this.lightbox = GLightbox({ selector: 'glightbox-' + this.galleryId })
    }
  }
}
</script>

“导入”语句触发“导航器未定义”错误。有什么建议如何解决这个问题？有没有一种干净的方法来制作同一组件的服务器端和客户端版本？

我在其他组件中使用它：

<base-gallery :items="items" :gallery-id="123" />

我尝试添加仅客户端，但这不能解决问题。

我也将组件的加载放入这样的插件中：

Vue.component(componentName, componentConfig.default || componentConfig)

然后在我的nuxt配置中：

  plugins: [
    { src: '~/plugins/baseGallery', mode: 'client' }
  ],

但是八十年代是行不通的：

客户端渲染的虚拟DOM树与服务器渲染的内容不匹配。这可能是由于错误的HTML标记（例如，在

内嵌套块级元素或缺少）引起的。保水合并执行完整的客户端渲染。

Answer 1

好，我发现了问题所在。

我正在尝试这样做：

<base-gallery client-only :items="items" :gallery-id="123" />

但是应该是这样的：

<client-only>
  <base-gallery :items="items" :gallery-id="123" />
</client-only>

Nuxt客户端专用组件

1 个答案: