nuxt.js 使用vue-awesome-swiper提示getComputedStyle' on 'Window': parameter 1 is not of type 'Element'?

Question

nuxt.js 使用vue-awesome-swiper提示Failed to execute getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

代码如下：

<div
      class="swiper-wrapper gallery-top"
      v-swiper:swiperTop1="swiperOptionTop"
      ref="swiperTop"
      @slideChange="onSlideChange"
    >
      <div class="swiper-slide" v-for="item in showImgs()" :key="item.id">
        <img :src="item.picUrl" @click="openNewWindow(item.forward)" class="gallery-img" />
      </div>
    </div>

网上有人说class需要使用swiper-wrapper，但是还不行,@slideChange="onSlideChange"也没出发

Answer 1

已解决，解决方案传送门

Answer 2

SSR 的时候，程序运行在服务器端，没有 window，自然会报错。

类似 swiper 这种依赖浏览器的库，还有各类图表，就要放弃 SSR。最简单的做法是在外面包一层 <client-only>。