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

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

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

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

Answer 1

基于swiper#4871，Nuxt 环境不支持 import 所需的工具swiper，但目前尚不清楚如何在 Nuxt 中修复此问题。添加（根据推荐的指南）对问题没有影响"type": "module"。package.json

\n

解决方法是通过显式路径导入swiper文件。如果您查看包的exports，您可以找到要使用的显式路径：

\n

"exports": {\n  ".": "./swiper.esm.js",                   // import \'swiper\' \xe2\x86\x92 import \'swiper/swiper.esm.js\'\n  "./core": "./swiper.esm.js",              // import \'swiper/core\' \xe2\x86\x92 import \'swiper/swiper.esm.js\'\n  "./bundle": "./swiper-bundle.esm.js",     // import \'swiper/bundle\' \xe2\x86\x92 import \'swiper/swiper-bundle.esm.js\'\n  "./css": "./swiper.min.css",              // import \'swiper/css\' \xe2\x86\x92 import \'swiper/swiper.min.css\'\n  "./css/bundle": "./swiper-bundle.min.css",// import \'swiper/css/bundle\' \xe2\x86\x92 import \'swiper/swiper-bundle.min.css\'\n  \xe2\x8b\xae\n}\n

\n

swiper动态修改标记，因此仅选择特定于浏览器的导出，在本例中是缩小的包：

\n

import Swiper from \'swiper/swiper-bundle.min\'\nimport \'swiper/swiper-bundle.min.css\'\n

\n

还可以使用该<client-only>组件swiper仅在客户端上呈现标记。

\n

<client-only>\n  <div class="swiper">\n    \xe2\x8b\xae\n  </div>\n</client-only>\n

\n

也在hookSwiper中实例化，这只发生在客户端：mounted

\n

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

\n

请注意，Swiper构造函数可以接收选择器字符串或 HTML 元素。然而，在 Nuxt 中似乎只有 HTML 元素适用于 Swiper，因此我们必须使用模板引用来传递该 HTML 元素 1\xef\xb8\x8f\xe2\x83\xa3。鉴于模板引用包含在 中<client-only>，Swiper 元素直到下一个渲染周期才会渲染，因此我们必须$nextTick()在访问模板引用 2\xef\xb8\x8f\xe2\x83\xa3 之前等待。

\n

<template>\n  <client-only>               1\xef\xb8\x8f\xe2\x83\xa3\n    <div class="swiper" ref="swiper">\n      \xe2\x8b\xae\n    </div>\n  </client-only>\n</template>\n\n<script>\n\xe2\x8b\xae\nexport default {\n  async mounted() {\n    await this.$nextTick() 2\xef\xb8\x8f\xe2\x83\xa3\n    new Swiper(this.$refs.swiper 1\xef\xb8\x8f\xe2\x83\xa3)\n  }\n}\n</script>\n

\n

演示

\n