带有 vue cli 和 TS 项目的 Vue 3 看不到 swiper 7

Posted 2023-02-22

【中文标题】带有 vue cli 和 TS 项目的 Vue 3 看不到 swiper 7

【英文标题】：Vue 3 with vue cli and TS project don't see swiper 7

【发布时间】：2021-11-05 04:41:56

【问题描述】：

我使用 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

我像这样导入 swiper：

import  Swiper, SwiperSlide  from 'swiper/vue'

Swiper 7 现在是纯 ESM 模块。我看到了这个文件： https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

谁能帮忙让它工作）？

【问题讨论】：

“看不到”到底是什么意思？该问题可能发生在设置的任何部分。如果有错误，请准确发布。见***.com/help/how-to-ask

我更新了问题，谢谢 Estus。

问题没有列出 package.json。它应该包含swiper，这是影响它的最重要的部分。如果已经存在，请先尝试删除并重新安装模块。

我已经试过了。而且我不得不回退到 Swiper 6。它工作正常 - 但我仍在寻找 swiper 7 的解决方案。我很伤心 Swiper 7 现在是纯 ESM 模块。这就是问题所在。我已将 package.json 添加到问题中

我在使用 Vue CLI 项目时遇到了同样的问题。我已按照上面链接的 ESM 指南进行操作，但不会发现 Swiper 7。我已经删除了 Typescript 和 ESLint 以排除它们，但编译器仍然告诉我 These dependencies were not found 并列出 Swiper 和它的 CSS。

【参考方案1】：

我在使用 webpack 4 的 Vue CLI v4 中遇到了同样的问题。我认为管理 Swiper 7 的 ESM 迁移存在某种问题，我还没有找到任何解决方法。

但是，更新到 webpack 5 解决了这个问题。您可以通过迁移到 Vue CLI 5 来做到这一点：

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

Vue CLI 5（目前是 beta 版本）使用 webpack 5，目前看来一切正常。