打包(vue项目)报错 Module not found: Error: Can't resolve 'swiper/dist/css/swiper.css' in ....

打包(vue项目)报错 Module not found: Error: Can’t resolve ‘swiper/dist/css/swiper.css’ in …

vue项目更新后执行 npm install 后再执行打包命令（npm run build）会有以下报错信息：

Module not found: Error: Can't resolve 'swiper/dist/css/swiper.css' in 'E:\workspace'  // 磁盘路径
@ ./src/modules/xlife/index.js 15:0-36
......

错误原因

现象

从报错信息上看，是找不到 swiper/dist/css/swiper.css 文件，发现某个文件里用 import 'swiper/dist/css/swiper.css' 语句引用里swiper的css样式。于是去node_modules文件夹里找相对应的文件目录，发现我的swiper的目录如下图：

这个文件夹中不存在引用的文件路径。
而正常不报错的项目中的目录结构如下图：

原因

我再本地执行 npm install 命令时，下载的vue-awesome-swiper版本不一致。项目中别人使用的是3.13版本的，而我下载的是最新版本5.3.7。

解决方案

下载指定版本即可。我这里下载3.1.3版本咯。

npm install vue-awesome-swiper@3.1.3

注意：
千万千万不要想着偷懒哦_{，去别人项目中copy一个目录一致的swiper目录过来哦。这样会在打包时出现swiper样式失效的问题。但是这个问题在本地跑时是没有问题的}