场景

今天在项目中用到了轮播图，想用swiper插件直接套进去，本来是打算用vue-awesome-swiper插件的，结果手贱在npm install vue-awesome-swiper之前又安装了一个swiper插件，于是导致我在使用swiper的过程中一直报错：Module not found: Error: Can't resolve 'swiper/dist/css/swiper.css'，不能解析swiper目录下的dist文件中的css，后来才知道**当在已经安装了 Swiper 插件的项目中再安装 vue-awesome-swiper 插件时，会 在 node_modules 目录下出现命名冲突。

原因

vue-awesome-swiper 插件在内部依赖于 Swiper 库，并对其进行了组件封装。因此，如果已经通过其他方式安装了 Swiper 插件，而在安装 vue-awesome-swiper 插件时，它也会尝试在 node_modules 目录下安装自己版本的 Swiper。

解决方案

所以为了避免冲突，可以选择以下两个解决方案之一：

1. 只使用 vue-awesome-swiper 插件：不需要额外安装 Swiper 插件。在这种情况下，如果已经安装了swiper插件可以删除项目中手动安装的 Swiper 插件，并通过 import 'swiper/dist/css/swiper.css' 导入 vue-awesome-swiper 的样式文件。
2. 只使用手动安装的 Swiper 插件：如果你已经通过其他方式手动安装了 Swiper 插件并正在使用它，可以选择放弃安装 vue-awesome-swiper 插件。你可以根据手动安装的 Swiper 插件，直接在项目中使用 Swiper 的原生 API，而不使用 vue-awesome-swiper 封装的 Vue 组件。