0 文章太长懒得看

将语句：import 'swiper/css/swiper.css'
修改为：import 'swiper/swiper-bundle.css'

1 出错原因

报错提示为 * swiper/css/swiper.css in ./src/main.js … ：

可以发现是css的引用出了问题。
vue-awesome-swiper 中的Global Registration写道：

// import style
import 'swiper/css/swiper.css'

这是Swiper老版本的的引入方式，当使用命令npm install swiper vue-awesome-swiper --save安装Swiper时，安装的是最新版本Swiper v6.4.15（2021/2/19），同时可以发现官网中关于swiper.css的引入方法变为了import 'swiper/swiper-bundle.css';。

2 解决方法

2.1 更换导入语句

将语句：import 'swiper/css/swiper.css'
修改为：import 'swiper/swiper-bundle.css'

2.2 降低Swiper的版本

查看Swiper的 changelog 后发现在6.0.0版本有一次大改，其中就包括：

所以推断安装6.0.0之前的版本可以解决该问题。
卸载当前Swiper：npm uninstall swiper
安装低版本的Swiper：npm install swiper@5.4.5 --save