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

Question

我正在使用 vue-awesome-swiper 并按照此处的步骤操作：https ://github.com/surmon-china/vue-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' },
  ]
...

滑块.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.jsvuejs2nuxt.jsswiperjs

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.com/surmon-china/surmon-china.github.io/tree/source/projects/vue-awesome-swiper/nuxt

它奏效了。