Nuxt js上的vue-awesome-swiper(swiperjs)在生产中不能工作，但在开发中可以工作。

Question

我正在使用vue-awesome-swiper，并按照这里的步骤进行了操作。https:/github.comsurmon-chinavue-awesome-swiper。. 我选择在Nuxt js中全局注册这个插件。

问题: 开发版的工作完全正常，幻灯片在每一页上，导航也正常。另一方面，制作版的所有幻灯片都在第一页，导航在这里工作，而其他页面则是空白，因为所有幻灯片都在第一页。

在开发阶段：在开发阶段，所有的幻灯片都在第一页，而在制作阶段，所有的幻灯片都在第一页。

在制作中

这些是我的文件

插件VueAwesomeSwiper.js。

import Vue from 'vue';
import VueAwesomeSwiper from 'vue-awesome-swiper';

// import style
import 'swiper/css/swiper.css';

Vue.use(VueAwesomeSwiper);

nuxt.config.js

...
css: [], <--- Do I need to add something to add here?
plugins: [
    { src: '~/plugins/VueAwesomeSwiper.js' },
  ]
...

TheSlider.vue

<template>
  <div>
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
        <swiper-slide>Slide 4</swiper-slide>
        <swiper-slide>Slide 5</swiper-slide>
        <swiper-slide>Slide 6</swiper-slide>
        <swiper-slide>Slide 7</swiper-slide>
        <swiper-slide>Slide 8</swiper-slide>
        <swiper-slide>Slide 9</swiper-slide>
        <swiper-slide>Slide 10</swiper-slide>
        <div slot="button-prev" class="swiper-button-prev"></div>
        <div slot="button-next" class="swiper-button-next"></div>
      </swiper>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class TheSlider extends Vue {
  swiperOption = {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  };
}
</script>

<style>

</style>

我不知道自己做错了什么。谁能帮帮我？谢谢！我使用的是vue-awesome-swiper，并按照这里的步骤进行了操作：https:/github.comsurmon-chinavisor。

Answer 1

我改成了。

<div v-swiper="swiperOption">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      Render original HTML in server, render Swiper in browser (client)
    </div>
  </div>
</div>

从... https:/github.comsurmon-chinasurmon-china.github.iotreesourceprojectsvue-awesome-swipernuxt。

它的工作。