0 文章太長(zhǎng)懶得看

將語(yǔ)句：import 'swiper/css/swiper.css'
修改為：import 'swiper/swiper-bundle.css'

1 出錯(cuò)原因

報(bào)錯(cuò)提示為 * swiper/css/swiper.css in ./src/main.js … ：

可以發(fā)現(xiàn)是css的引用出了問(wèn)題。
vue-awesome-swiper 中的Global Registration寫道：

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

這是Swiper老版本的的引入方式，當(dāng)使用命令npm install swiper vue-awesome-swiper --save安裝Swiper時(shí)，安裝的是最新版本Swiper v6.4.15（2021/2/19），同時(shí)可以發(fā)現(xiàn)官網(wǎng)中關(guān)于swiper.css的引入方法變?yōu)榱薸mport 'swiper/swiper-bundle.css';。

2 解決方法

2.1 更換導(dǎo)入語(yǔ)句

將語(yǔ)句：import 'swiper/css/swiper.css'
修改為：import 'swiper/swiper-bundle.css'

2.2 降低Swiper的版本

查看Swiper的 changelog 后發(fā)現(xiàn)在6.0.0版本有一次大改，其中就包括：

所以推斷安裝6.0.0之前的版本可以解決該問(wèn)題。
卸載當(dāng)前Swiper：npm uninstall swiper
安裝低版本的Swiper：npm install swiper@5.4.5 --save

總結(jié)

以上是生活随笔為你收集整理的解决vue-awesome-swiper中swiper/css/swiper.css无法导入问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。