无法将 Swiper.js v11 与 VUE.JS v3 一起使用：未找到依赖项

Question

我正在开发一个 vue.js V3.0.0 项目，并且想使用 swiper.js。

只要我尝试使用“子文件夹”包（例如

import Swiper from 'swiper/element/bundle';

）导入swiper包，我就会收到消息：

This dependency was not found:

To install it, you can run: npm install --save swiper/element/bundle

我的 package.json 看起来像这样：

  "dependencies": {
    "axios": "^0.25.0",
    "core-js": "^3.6.5",
    "firebase": "^9.6.2",
    "register-service-worker": "^1.7.1",
    "swiper": "^11.0.3",
    "vue": "^3.0.0",
    "vue-pdf-embed": "^1.1.1",
    "vue-router": "^4.0.12",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@tailwindcss/postcss7-compat": "^2.2.17",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "autoprefixer": "^9.8.8",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "postcss": "^7.0.39",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
  }

你知道它出了什么问题吗？

非常感谢！我正在为此苦苦挣扎......

Answer 1

我找到了一个解决方案，无需使用新版本的 vue.js 重建我的项目：使用旧的 swiper 版本，它不是 ESM 模块：swiper@6。

感谢您的宝贵时间！