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>

我不确定我做错了什么。有人可以帮忙吗？谢谢！

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

它奏效了。

Answer 2

查看 swiper 版本，如果您使用的是 Swiper 6.0.0 或更高版本，请导入此 css 文件：

插件/VueAwesomeSwiper.js

import 'swiper/swiper-bundle.css'

如果 Swiper 版本为 5.* 或更低，请导入此文件：
plugins/VueAwesomeSwiper.js

import 'swiper/css/swiper.css'

---

安装后，如果分页不起作用，请将您的 Swiper 版本降级到 5.*

---

查看此链接：
https ://github.com/surmon-china/vue-awesome-swiper
https://github.com/surmon-china/surmon-china.github.io/tree/source/projects/vue-awesome -swiper/nuxt

Answer 3

查看 nuxt 示例页面上的文档

https://github.com/surmon-china/surmon-china.github.io/tree/source/projects/vue-awesome-swiper/nuxt

您将在 nuxt.config.js 中添加几行

    export default {
  // some nuxt config...
  plugins: [
    { src: '@/plugins/nuxt-swiper-plugin.js', ssr: false },
  ],
  // some nuxt config...
  css: [
    // swiper style
    'swiper/css/swiper.css'
  ],
  // some nuxt config...
}

Answer 4

在这里你可以看到指令使用的重构：

SSR代码示例：https ://github.com/surmon-china/surmon-china.github.io/tree/source/projects/vue-awesome-swiper/nuxt