Vue.js 如何在Nuxt中将vue完整日历作为插件导入

我在使用Nuxt获取vue完整日历时遇到问题。 我在plugins目录中制作了一个插件vue-full-calendar.js，我在其中检查浏览器环境：

import Vue from 'vue'

if (process.browser) {
  window.onNuxtReady(() => {
    const VueFullCalendar = require('vue-full-calendar')
    Vue.use(VueFullCalendar)
  })
}

接下来，我将插件添加到nuxt.config.js，ssr设置为'false'，如下所示：

plugins: [
    { src: '~plugins/vue-full-calendar', ssr: false }
]

我只是将其包含在nuxt页面文件的模板部分：

 <template>
  <div>
    <full-calendar :events="events" :header="header" :config="config" ref="calendar"></full-calendar>
    <appointment-dialog :show="showAppointmentDialog"
                        :selectedAppointment="selectedAppointment"
                        @dialog-close="showAppointmentDialog = false">
    </appointment-dialog>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import AppointmentDialog from '~/components/AppointmentDialog'

  export default {
    head () {
      return {title: this.$t('appointments')}
    },
    data () {
      return {
        showAppointmentDialog: false,
        selected: {},
        header: {
          center: 'title',
          left: 'prev,next today',
          right: 'agendaWeek,agendaDay'
        },
        events: []
      }
    },
    fetch ({store, params}) {
      store.dispatch('appointments/fetch')
      store.dispatch('settings/fetch')
    },
    methods: {
      goToDate (date) {
        this.$refs.calendar.fireMethod('gotoDate', date)
      }
    },
    watch: {
      selectedDate (date) {
        this.goToDate(date)
      }
    },
    computed: {
      ...mapGetters({
        selectedAppointment: 'appointments/selected',
        appointments: 'appointments/appointments',
        settings: 'settings/byName',
        selectedDate: 'dates/selectedDate'
      }),
      config () {
        return {
          eventClick: (event) => {
            this.selected = event.source.rawEventDefs[0]
            this.$store.commit('SET_SELECTED_APPOINTMENT', this.selected)
            this.showAppointmentDialog = true
          },
          firstDay: 1,
          defaultDate: this.selectedDate,
          allDaySlot: false,
          slotDuration: 15,
          slotLabelInterval: 'label',
          minTime: 8,
          maxTime: 19
        }
      }
    },
    components: {
      AppointmentDialog
    }
  }
</script>

从“vuex”导入{mapGetters}
从“~/components/AppointDialog”导入AppointDialog
导出默认值{
头（）{
返回{title:this.$t（'约会'）}
},
数据（）{
返回{
ShowAppointDialog:false，
选定：{}，
标题：{
中心：'标题'，
左：“上一个，下一个今天”，
右图：“agendaWeek，agendaDay”
},
事件：[]
}
},
获取（{store，params}）{
store.dispatch（'约会/取回'）
store.dispatch（'settings/fetch'）
},
方法：{
哥托达特（日期）{
此.$refs.calendar.fireMethod（'gotoDate'，日期）
}
},
观察：{
选定日期（日期）{
这是goToDate（日期）
}
},
计算：{
…地图绘制者({
选定的应用程序：“约会/选定”，
任命：“任命/任命”，
设置：“设置/按名称”，
selectedDate:“日期/selectedDate”
}),
配置（）{
返回{
事件单击：（事件）=>{
this.selected=event.source.rawEventDefs[0]
this.$store.commit（'SET\u SELECTED\u APPOINTMENT'，this.SELECTED）
this.showAppointDialog=true
},
第一天：1，
默认日期：this.selectedDate，
全天时段：错，
延迟时间：15，
slotLabelInterval:“标签”，
时间:8,，
最长时间：19
}
}
},
组成部分：{
任命对话框
}
}

但是，在控制台中，我得到两个错误：

“

客户端呈现的虚拟DOM树与服务器呈现的内容不匹配

”

“

未知自定义元素：

”

---

但是完整的日历组件应该是全局注册的，因为我将它注册为一个插件。

现在可以使用了。首先，我在plugins目录中制作了一个插件“vue full calendar.js”

import Vue from 'vue';
import VueFullCalendar from 'vue-full-calendar';

Vue.use(VueFullCalendar);

然后，我将插件添加到nuxt.config.js文件中，ssr设置为false：

plugins: [
  { src: '~plugins/vue-full-calendar', ssr: false }
],

然后在模板部分的我的Nuxt页面中，我将完整日历组件设置为no-ssr组件的子组件

<template>
 <div>
   <no-ssr>
     <full-calendar :events="events" :header="header" :config="config" ref="calendar">
     </full-calendar>
   </no-ssr>
 </div>
</template>

如果您需要帮助，您需要对您的问题进行更详细的描述，而不仅仅是“有问题”。@ADyson抱歉，我错误地发布了我未完成的问题。我添加了有关我的问题的更多信息。值得指出的是，如果您使用

FullCalendar

而不是

FullCalendar

，那么它将不起作用。不知道为什么。谢谢你的解决方案！