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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。