web-dev-qa-db-ja.com

Nuxt jsのvue-awesome-swiper（swiperjs）は本番環境では機能しませんが、devでは機能します

私はvue-awesome-swiperを使用しており、次の手順に従っています： https://github.com/surmon-china/vue-awesome-swiper 。このプラグインをNuxt jsでグローバルに登録することを選択しました。

[〜＃〜]問題[〜＃〜]：Devは完全に機能し、スライドは各ページにあり、ナビゲーションは機能します。一方、作品には1ページ目にすべてのスライドがあり、すべてのスライドが最初のページにあるため、ナビゲーションはここで機能し、他のページは空白のままになります。

開発者： Dev Server Carousel

生産時： Production Server Carousel

これらは私のファイルです：

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>

何が悪いのかわかりません。誰か助けてもらえますか？ありがとう！

vue.jsvuejs2nuxt.jsswiperjs
1
AlyssaAlex

私は次のように変更しました：

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

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

そしてそれは働いた。

2
AlyssaAlex