nuxt与vue-drag涡旋:窗口未定义

Question

我正在尝试将vue-dragscroll与nuxtjs结合使用。

我是nuxtjs的新手，我以前在普通vuejs中使用过vue-dragscroll。

我已经看到一个错误窗口没有定义，我查看了vue-dragscroll文档，但仍然找不到解决方案。

​

​

这就是我实现vue-dragscroll的方式

<template lang="pug">
  div
    CountriesSearch.mb-2
    div#countryList(v-for="country in countries" :key="country.country" v-dragscroll)
      CountryItem(:country="country" v-if="country.Country")
</template>

<script>
import { dragscroll } from 'vue-dragscroll'

export default {
  directives: {
    dragscroll
  },

Answer 1

您必须将其声明为plugin文件中的指令。

// plugins/vue-dragscroll.js
import Vue from 'vue'
import { dragscroll } from 'vue-dragscroll'

Vue.directive('dragscroll', dragscroll)

然后，在nuxt.config.js中将该插件文件添加到plugins: []数组中：

{ src: '@/plugins/vue-dragscroll.js', ssr: false }

此指令利用window期间不可用的SSR，从而导致您的错误。