Vue项目引入Swiper报错：Module not found: Can't resolve 'swiper/css'如何解决

• 版本不匹配：你参考的官方文档是Swiper 7.x及以上版本的用法，该版本仅支持Vue3，样式导入路径为swiper/css。若你安装的是Swiper 6.x及以下版本、或者项目为Vue2，都会找不到该路径。
• 依赖安装异常：npm安装过程中可能出现包文件丢失、缓存损坏的情况，导致swiper相关的样式文件缺失。

场景1：项目为Vue3 #

• 先检查package.json中的swiper版本，若版本低于7.x，执行以下命令安装最新版：

npm uninstall swiper
npm install swiper@latest

• 若版本已经是7.x以上仍报错，清理缓存重装依赖即可：

# 删除依赖文件和缓存
rm -rf node_modules package-lock.json
npm cache clean --force
# 重新安装所有依赖
npm install

场景2：项目为Vue2 #

Swiper 7+ 不兼容Vue2，需安装适配Vue2的版本，执行命令：

npm install swiper@6 vue-awesome-swiper@4

同时修改导入代码：

// 导入组件
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// 导入样式，替换原swiper/css导入
import 'swiper/css/swiper.css'

内容的提问来源于stack exchange，提问作者RisingCode