nuxt.js - 将 Swiper js 与 Nuxt 一起使用会引发依赖项未找到错误

Question

我正在使用 vue-awesome-swiper但最近我在移动设备上遇到了一些问题(我有一个按钮轮播，当我点击其中一个按钮时，点击 btn 大约需要一两秒钟)并且因为该软件包自 2020 年以来没有更新并且仍在使用 swiper v5 ，我决定使用 Swiper js本身。我已经按照文档中的说明进行了操作，但出现了 dependency not found 错误

包.json

{
  "name": "myapp",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "dev:host": "nuxt --hostname 0.0.0.0 --port 8000",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/device": "^2.1.0",
    "core-js": "^3.15.1",
    "nuxt": "^2.15.7",
    "swiper": "^7.0.9",
    "vuetify": "^2.5.5"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.12.1",
    "@mdi/font": "^5.9.55",
    "@nuxtjs/dotenv": "^1.4.1",
    "noty": "^3.2.0-beta",
    "nuxt-gsap-module": "^1.2.1",
    "sass": "1.32.13"
  }
}

测试.vue

<template>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, idx) in 20" :key="item" style="width:auto">
                <v-chip
                class="items px-2"
                :class="{'items--active': activeId === item }"
                label @click.prevent="itemClicked(item, idx)">
                    {{item}}
                </v-chip>
            </div>
        </div>
    </div>
</template>

<script>
import Swiper , { FreeMode } from 'swiper';
import 'swiper/css';
export default {
    data(){
        return{
            activeId: null
        }
    },
    methods:{
        itemClicked(item, itemIndex){
            this.activeId = item
        },
    },
    created(){
        if(process.client){
            Swiper.use([FreeMode]);
            const swiper = new Swiper('.swiper', {
                preventClicks: true,
                preventClicksPropagation: true,
                loop: false,
                slidesPerView: 'auto',
                spaceBetween: 30,
                freeMode: {
                    enabled: true,
                    sticky: true
                }
            });
        }
    }
}
</script>

更新:按照建议尝试插件注入(inject)，仍然得到

These dependencies were not found:
* swiper in ./plugins/swip.js
* swiper/css in ./plugins/swip.js
To install them, you can run: npm install --save swiper swiper/css

插件/swip.js

import Swiper , { FreeMode } from 'swiper';
import 'swiper/css';
export default ({ app }, inject) => {
    inject('swiper', (el , options)=>{
        Swiper.use([FreeMode]);
        return new Swiper(el, options);
    })
}

Answer 1

基于 swiper#4871 , Nuxt 环境不支持导入所需的工具 swiper ，但不清楚如何在 Nuxt 中修复此问题。添加"type": "module"至 package.json (根据 recommended guide )对问题没有影响。

解决方法是导入 swiper按显式路径的文件。如果您查看 package's exports ，您可以找到要使用的显式路径:

"exports": {
  ".": "./swiper.esm.js",                   // import 'swiper' → import 'swiper/swiper.esm.js'
  "./core": "./swiper.esm.js",              // import 'swiper/core' → import 'swiper/swiper.esm.js'
  "./bundle": "./swiper-bundle.esm.js",     // import 'swiper/bundle' → import 'swiper/swiper-bundle.esm.js'
  "./css": "./swiper.min.css",              // import 'swiper/css' → import 'swiper/swiper.min.css'
  "./css/bundle": "./swiper-bundle.min.css",// import 'swiper/css/bundle' → import 'swiper/swiper-bundle.min.css'
  ⋮
}

swiper动态修改标记，所以只选择特定于浏览器的导出，在这种情况下是缩小的包:

import Swiper from 'swiper/swiper-bundle.min'
import 'swiper/swiper-bundle.min.css'

也使用 <client-only> component渲染 swiper仅在客户端上标记。

<client-only>
  <div class="swiper">
    ⋮
  </div>
</client-only>

同时实例化Swiper在 mounted hook ，这只发生在客户端:

export default {
  mounted() {
    new Swiper()
  }
}

注意 Swiper constructor可以接收选择器字符串或 HTML 元素。然而，在 Nuxt 中似乎只有一个 HTML 元素适用于 Swiper，因此我们必须使用 template ref。传递那个 HTML 元素 1️⃣。鉴于模板引用包含在 <client-only> 中, Swiper 元素直到下一个渲染周期才会被渲染，所以我们必须等待 $nextTick() 在访问模板引用 2️⃣ 之前。

<template>
  <client-only>               1️⃣
    <div class="swiper" ref="swiper">
      ⋮
    </div>
  </client-only>
</template>

<script>
⋮
export default {
  async mounted() {
    await this.$nextTick() 2️⃣
    new Swiper(this.$refs.swiper 1️⃣)
  }
}
</script>

demo