Question

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

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

Components / Carousel / Carousel.vue

'Nested For Loop to Extract Values into Column G
        For DCRNumOfParts = LastCellInColumn - 4 To 1 Step -1

            Set SortCell = Cells(SortRow, 5)
            SortCell.Select
            IsCellError = IsError(Selection.Value)

                'If Statement to determine if the cell value is 0 or error state
                'If Selection.Value <> 0 Or VarType(ActiveCell.Value) <> vbError Then
                If Selection.Value <> "0" And IsCellError <> True Then

                    Selection.Copy
                    Set CopyCell = Cells(SortRow, 7)
                    CopyCell.Select
                    ActiveSheet.Paste

                End If

            SortRow = SortRow + 1

        Next DCRNumOfParts

nuxt.config.js

 <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>

plugins / vue-slick

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

感谢您的帮助！

Answer 1

因此，这是由于nuxt试图在服务器端呈现平滑组件，即使您在nuxt.config中设置了ssr: false。

我在其他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>

基本上，这意味着直到所有服务器端渲染之后，才在调用装入的函数之前声明该组件。那应该做到的。祝你好运。

Answer 2

我找到了另一个简单的解决方案。只需将“vue-slick”包安装到您的 nuxt 项目即可。 $ yarn 添加 vue-slick

然后组件标记如下。

<template>
    <component :is="slick" :options="slickOptions">
      <div>Test1</div>
      <div>Test2</div>
      <div>Test3</div>
    </component>
</template>

最后像这样设置数据和计算属性。

data() {
    return {
      slickOptions: {
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
        centerMode: true,
      },
    };
  },
  computed: {
     slick() {
       return () => {
          if (process.client) {
          return import("vue-slick");
          }
        };
      },
    },

此解决方案可防止在 nuxt 配置中将光滑的组件作为插件全局导入。

未定义窗口Nuxt用于vue-slick

2 个答案: