Swiper - 没有找到依赖打字稿，离子-vue
Posted
技术标签:
【中文标题】Swiper - 没有找到依赖打字稿，离子-vue【英文标题】：Swiper - Dependency was not found Typescript, ionic-vue 【发布时间】：2021-10-27 20:54:18 【问题描述】：我尝试使用swiper 替代ion-slides，因为我不能将它用于动态渲染。
我已经在package.json中正确安装了swiper@7.0.1，但是当根据Vue组件（Home.vue）中的swiper docs导入包时，CLI响应下一个错误：
This dependency was not found:
* swiper/vue in ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./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/views/Home.vue?vue&type=script&lang=ts
To install it, you can run: npm install --save swiper/vue
所以，我真的不知道问题是否出在 tsconfig.json 文件上，因为作为“测试”，我已经安装了 vue3-circle-progress 包，它可以正常工作。
如果我的 tsconfig 有问题或者我没有正确的 swiper 包，请告诉我。
谢谢。
文件：
Home.vue
<template>
<ion-page>
<ion-header>
<ion-toolbar class="custom-toolbar">
<ion-buttons slot="start">
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-icon class="icon-size mr-4" src="assets/icon/pray.svg" />
</ion-buttons>
<ion-title class="text-white">Main Title</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<div class="px-4">
<h1 class="text-gray-800 font-bold text-3xl mt-5 mb-3">
$t("home.discover")
</h1>
</div>
<swiper
:slides-per-view="3"
:space-between="50"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
</swiper>
<circle-progress :is-bg-shadow="true" />
</ion-content>
</ion-page>
</template>
<script lang="ts">
import
IonPage,
IonHeader,
IonToolbar,
IonTitle,
IonContent,
IonRefresher,
IonRefresherContent,
IonSlides,
IonSlide,
IonIcon,
menuController,
from "@ionic/vue";
import GetNewests from "../services/home";
import onMounted, ref from "vue";
import Swiper, SwiperSlide from "swiper/vue";
import CircleProgress from "vue3-circle-progress";
import "vue3-circle-progress/dist/circle-progress.css";
export default
name: "Home",
components:
IonHeader,
IonToolbar,
IonTitle,
IonContent,
IonPage,
IonRefresher,
IonRefresherContent,
IonIcon,
Swiper,
SwiperSlide
,
setup()
const newests = ref([]);
menuController.enable(true);
const generalOpts =
slidesPerView: "auto",
zoom: false,
loop: false,
grabCursor: true,
;
function doRefresh(event)
console.log("Begin async operation");
setTimeout(() =>
console.log("Async operation has ended");
event.target.complete();
, 2000);
async function getNewests(limit = 4, type = 0)
try
const res = await GetNewests(limit, type);
if (!res.data.success)
throw new Error(res.data.message);
newests.value = res.data.data;
catch (error)
presentAlert("Error", error.message);
onMounted(() =>
getNewests();
);
return
newests,
doRefresh,
generalOpts,
;
,
;
</script>
package.json
"name": "my-app",
"version": "0.0.1",
"private": true,
"scripts":
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
,
"dependencies":
"@capacitor/android": "^2.4.2",
"@capacitor/core": "2.4.2",
"@capacitor/ios": "^2.4.2",
"@ionic-native/core": "^5.29.0",
"@ionic-native/youtube-video-player": "^5.29.0",
"@ionic/vue": "^5.4.0",
"@ionic/vue-router": "^5.4.0",
"@types/swiper": "^5.4.3",
"axios": "^0.21.0",
"cordova-plugin-youtube-video-player": "^2.4.0",
"core-js": "^3.6.5",
"swiper": "^7.0.1",
"tailwindcss": "1.9.5",
"vue": "^3.0.0-0",
"vue-i18n": "^9.0.0-beta.8",
"vue-router": "^4.0.0-0",
"vue3-circle-progress": "^1.0.6"
,
"devDependencies":
"@capacitor/cli": "2.4.2",
"@types/jest": "^24.0.19",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.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-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0-0",
"@vue/eslint-config-typescript": "^5.0.2",
"@vue/test-utils": "^2.0.0-0",
"eslint": "^6.7.2",
"eslint-config-prettier": "^6.14.0",
"eslint-plugin-vue": "^7.0.0-0",
"prettier": "^2.1.2",
"typescript": "~3.9.3",
"vue-jest": "^5.0.0-0"
,
"description": "An Ionic project"
tsconfig.json
"compilerOptions":
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env",
"jest"
],
"paths":
"@/*": [
"src/*"
]
,
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
,
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
【问题讨论】：
我也有同样的问题，我在vue 3中使用的是swiper 7.0.9。如果你有解决方案请分享谢谢。 【参考方案1】：一切看起来都很好，我看到的与我实施的项目的唯一区别是版本号，我使用的是"swiper": "^6.7.5"
我会尝试删除 node_module 目录并执行npm install
在这里有完整的视频 - https://youtu.be/pyqHuJSAgeY
【讨论】：
“回滚”的答案不应该是认可的解决方案。在使用 vue 3 / vue cli 的最新 swiper 构建中，该问题仍然存在 我同意，不过如果你不能捆绑 ESM，这就是 swiper 的建议：github.com/nolimits4web/swiper/issues/4871以上是关于Swiper - 没有找到依赖打字稿，离子-vue的主要内容，如果未能解决你的问题，请参考以下文章