javascript - 刷新页面时未定义Nuxt错误窗口

Question

一切正常，但是当我重新加载页面时，我得到错误窗口未定义

我已将其添加到插件中，并且尝试了 ssr:false 和 mode:'client'

我认为问题是 Nuxt 在重新加载页面并使用服务器端呈现代码时没有将配置应用于 Vue。

  plugins: [
    { src: '~/plugins/lightbox.js', ssr:false }
  ],

这是插件文件

// plugins/lightbox.js
import GLightbox from 'glightbox'
import '../node_modules/glightbox/dist/css/glightbox.css'

这是一个使用 Glightbox 库的页面

_post.vue

<template>
<div class="main">
    <div class="wrapper">
        <div class="container">
            <h2 class="heading">{{ data.title }}</h2>
            <p>{{ data.description }}</p>
        </div>
        <div>
            <div class="gallery">
            <div v-for="item in data.images" :key="item.id">
                <!-- <img class="image" :src="item.image" alt=""> -->
                <a @mouseenter.prevent="setLightBox" :href="item.image" class="glightbox">
                    <figure>
                    <img :src="item.image" class="image">
                    </figure>
                </a>
            </div>
            
        </div>
        </div>
    </div>
</div>
</template>

<script>

import GLightbox from 'glightbox'

export default {
    // transition:'slide-fade',
    async asyncData({ $axios, params }) {
    const data = await $axios.$get(`api/v1/projects/${params.post}`)
    console.log(data)
    return { data }
  },
  data(){
      return {
          lightbox: ''
      }
  },
  methods: {
      setLightBox(){
            this.lightbox = GLightbox({
                touchNavigation: true,
                loop: false,
            })
        },
        toggleLightBox(){
            this.lightbox.open()
        }
  }
}
</script>

标签： javascriptnode.jsnuxt.jsserver-side-rendering