窗口未定义 Nuxt for vue-slick

Question

您好，我遇到了 Nuxts ssr 问题。我试图将“vue-slick”添加到我的网络应用程序中，无论我做什么，它都会继续显示“窗口未定义”。

如您所见，我尝试了多种方法来允许在客户端加载 vue-slick。使用插件没有帮助，在我的组件中使用 process.client 也不起作用。

组件/Carousel/Carousel.vue

 <template>
<div class="carousel">
<Slick ref="slick" :options="slickOptions">
    <a href="http://placehold.it/320x120">
            <img src="http://placehold.it/320x120" alt="">
        </a>
        ...
    <a href="http://placehold.it/420x220">
            <img src="http://placehold.it/420x220" alt="">
        </a>


    </Slick>
</div>

</template>

<script>
if (process.client) {
  require('vue-slick')
}
import Slick from 'vue-slick'

export default {    

    components: {
        Slick
    },
    data() {
        return {

            slickOptions: {
                        slidesToShow: 4

            },

            isMounted: false
        }
    },

    methods: {

    }


}
</script>

nuxt.config.js

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

插件/vue-slick

import Vue from 'vue'
import VueSlick from 'vue-slick'

Vue.use(VueSlick);

谢谢你提供的所有帮助！

Answer 1

所以这是由于 nuxt 试图在服务器端渲染光滑的组件，即使你已经ssr: false在 nuxt.config 中设置。

我在其他 nuxt 插件中遇到过这个问题，这些步骤应该可以解决它。

在 nuxt.config.js 中将此添加到您的构建对象中：

build: {
    extend(config, ctx) {
    if (ctx.isServer) {
        config.externals = [
          nodeExternals({
            whitelist: [/^vue-slick/]
          })
        ]
      }
    }
  }

并且在您尝试为其提供服务的页面中，您必须在页面完全安装之前不要安装组件。所以在你的 Components/Carousel/Carousel.vue 中这样设置：

<template>
  <div class="carousel">
    <component
      :is="slickComp"
      ref="slick" 
      :options="slickOptions"
    >
      <a href="http://placehold.it/320x120">
        <img src="http://placehold.it/320x120" alt="">
      </a>
        ...
      <a href="http://placehold.it/420x220">
        <img src="http://placehold.it/420x220" alt="">
      </a>
    </component>
  </div>
</template>

然后在您的脚本部分导入您的组件并像这样声明它：

<script> 
  export default {
    data: () => ({
        'slickComp': '',
    }),
    components: {
        Slick: () => import('vue-slick')
    },
    mounted: function () {
        this.$nextTick(function () {
           this.slickComp = 'Slick'
        })
    },
  }
</script>

基本上，这意味着在调用挂载函数之前不会声明组件，这是在所有服务器端渲染之后。那应该这样做。祝你好运。