帶有 vue cli 和 TS 項目的 Vue 3 看不到 swiper 7

Question

我使用 TS 安裝了 Swiper 7 到 vue3 項目，通過 vue CLI 創建：這是我的 ts.config：

  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "noImplicitAny": false,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "allowJs": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest",
      "chrome"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
, "src/router/index.js"  ],
  "exclude": [
    "node_modules",
    "src/webcommon/",
  ],
}

package.json：

{
  "name": "wallet-dapp",
  "version": "0.1.0",
  "private": true,
  "module": "vue.esm.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "serve-dev": "cross-env BUILD_TYPE=development vue-cli-service serve",
    "build": "vue-cli-service build --no-unsafe-inline",
    "build-dev": "cross-env BUILD_TYPE=development vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@types/chrome": "0.0.154",
    "@vueuse/components": "^6.0.0",
    "@vueuse/core": "^6.0.0",
    "bip32": "^2.0.6",
    "bitcoinjs-lib": "^5.2.0",
    "core-js": "^3.6.5",
    "cross-env": "^7.0.3",
    "seedrandom": "^3.0.5",
    "svgo": "^2.3.1",
    "swiper": "^6.8.4",
    "vue": "^3.0.0",
    "vue-i18n": "^9.1.7",
    "vue-meta": "^3.0.0-alpha.9",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^2.2.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "svgo-loader": "^3.0.0",
    "typescript": "~4.1.5",
    "vue-cli-plugin-svg-sprite": "^1.1.0",
    "vue-jest": "^5.0.0-0"
  }
}

我在 webpack 構建期間遇到此錯誤：

These dependencies were not found:

swiper in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./src/webcommon/components/Store/DappPage.vue?vue&type=script&lang=js

我像這樣導入刷卡器：

import { Swiper, SwiperSlide } from 'swiper/vue'

Swiper 7 現在是純 ESM 模塊。 我看到了這份文件： https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

任何人都可以幫助使其工作）？

Answer 1

我遇到了 Vue CLI v4 的相同問題，它使用 webpack 4。我認為管理 Swiper 7 的 ESM 遷移存在某種問題，但我還沒有找到任何解決方法。

然而，更新到 webpack 5 解決了這個問題。 你可以通過遷移到 Vue CLI 5 來做到這一點：

https://next.cli.vuejs.org/migrations/migrate-from-v4.html

Vue CLI 5 使用 webpack 5 一切正常。