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

【问题标题】：vue-awesome-swiper(swiperjs) on Nuxt js not working in production but works on devNuxt js 上的 vue-awesome-swiper(swiperjs) 不能在生产环境中工作，但可以在开发环境中工作
【发布时间】：2020-09-05 09:48:07
【问题描述】：

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

问题：Dev 工作得非常好，幻灯片在每个页面上，并且导航工作正常。另一方面，制作中的所有幻灯片都在第一页，导航在此处有效，其他页面为空白，因为所有幻灯片都在第一页上。

在开发中：

关于生产：

这些是我的文件：

插件/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.js vuejs2 nuxt.js swiperjs

【解决方案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

它奏效了。

【讨论】：

你的分页工作了吗？我的现在不工作了

【解决方案2】：

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

插件/VueAwesomeSwiper.js

import 'swiper/swiper-bundle.css'

如果 Swiper 版本为 5.* 或更低版本，请导入此文件：
插件/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

【讨论】：

【解决方案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...
}

【讨论】：

【解决方案4】：

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

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

【讨论】：