Vue CLI创建的Vue3+TS项目引入Swiper7提示依赖未找到如何解决

问题根因 #

• 当前项目 package.json 中安装的 swiper 版本为 6.8.4，并非目标 Swiper7 版本，版本不匹配导致路径解析错误
• tsconfig.json 中 exclude 配置包含了 src/webcommon/，而报错的 DappPage.vue 刚好在该路径下，模块解析逻辑会跳过该目录下的文件依赖检索
• Vue CLI 4 默认的 webpack 配置不会转译 node_modules 下的纯 ESM 模块，Swiper7 仅提供 ESM 产物，CJS 环境无法直接识别其模块导出

解决步骤 #

• 首先卸载旧版本 Swiper，安装 Swiper7 正式版本

npm uninstall swiper
npm install swiper@7 --save

• 修改 tsconfig.json 配置，移除 exclude 中的 src/webcommon/ 条目，避免目标组件目录被排除在解析范围外，修改后的 exclude 配置如下：

"exclude": [
  "node_modules"
]

• 项目根目录的 vue.config.js 中新增 transpileDependencies 配置，强制 webpack 转译 Swiper 模块，处理 ESM 兼容问题：

module.exports = {
  // 其他已有配置保持不变
  transpileDependencies: ['swiper']
}

• 修正组件导入逻辑，需同时导入 Swiper 基础样式：

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

// 若使用 pagination、navigation 等扩展模块，需额外导入对应模块和样式
// import { Pagination, Navigation } from 'swiper'
// import 'swiper/css/pagination'
// import 'swiper/css/navigation'

• 若存在 TypeScript 类型报错，可在 tsconfig.json 的 compilerOptions.types 数组中新增 Swiper 类型声明：

"types": [
  "webpack-env",
  "jest",
  "chrome",
  "swiper"
]

内容的提问来源于stack exchange，提问作者Олег Кущ