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

Question

我使用的是vue-awesome-swiper，但最近我在移动设备上遇到了一些问题（我有一个按钮轮播，当我点击其中一个按钮时，大约需要一两秒钟才能点击 btn），因此软件包自 2020 年以来一直没有更新，仍然使用 swiper v5，我决定使用 Swiper js 本身。我已经按照文档中的说明完成了，但我收到了 dependency not found 错误

package.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"
  }
}

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

更新： 按照建议尝试插件注入，仍然得到

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>

还要在mounted hook 中实例化Swiper，它只发生在客户端：

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

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