我在让vue-full-calendar与Nuxt合作时遇到问题。我在插件目录中创建了插件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>

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

' The client-side rendered virtual DOM tree is not matching server-rendered content'

' Unknown custom element: <full-calendar>'

但是，由于我将完整的日历组件注册为插件，因此应该在全球范围内进行注册。