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

Question

我正在使用 vue-awesome-swiper 并按照此处的步骤操作：https://github.com/surmon-china/vue-awesome-swiper。我选择在 Nuxt js 中全局注册这个插件。

问题：Dev 工作得很好，幻灯片在每个页面上，导航工作正常。另一方面，产品在第一页上有所有幻灯片，导航在这里工作，其他页面留空，因为所有幻灯片都在第一页上。

关于开发：

制作中：

这些是我的文件：

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

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

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 文件：

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

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

vue-awesome-swiper(swiperjs) on Nuxt js not working in production but works on dev

vue.js

vuejs2

nuxt.js

swiperjs