Javascript 如何在Nuxt.js中使用官方Swiper.js作为插件

我有带代码的插件

swiper.js

：

import Vue from "vue";
// import Swiper core and required components
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from "swiper";

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/swiper.scss";
import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";
import "swiper/components/scrollbar/scrollbar.scss";

// install Swiper components
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
Vue.use(Swiper, SwiperCore, SwiperSlide);

但这对我来说不起作用。在这里，您可以在上看到我的完整演示代码

我尝试从for Vue.js安装Swiper

依赖关系

"dependencies": {
  "core-js": "^3.6.5",
  "nuxt": "^2.14.6",
  "swiper": "^6.3.2"
},
"devDependencies": {
  "@nuxtjs/style-resources": "^1.0.0",
  "node-sass": "^4.14.1",
  "sass-loader": "^10.0.2"
}

控制台错误：

未知自定义元素：-您是否注册了该组件 正确地对于递归组件，请确保提供“名称” 选择权

---

客户端呈现的虚拟DOM树不匹配 服务器呈现的内容。这可能是由不正确的HTML造成的 标记，例如在

内嵌套块级元素，或 丢失的提捞水合作用并执行完全客户端 渲染

如上所述，实际的Swiper版本（6.3及更高版本）仅支持Vue 3。但是Nuxt仍然在引擎盖下使用Vue 2，因此不能使用从

Swiper/Vue

软件包导入的Swiper Vue组件（Swiper、SwiperSlide等）。Nuxt 3（基于Vue 3）计划于2021年第一季度发布

---

您可以通过“入门”指南手动设置Swiper，无需组件：。这并不难，您只需将Swiper布局复制到模板中，并在

mounted（）

方法中初始化Swiper。

您是否尝试导入插件，将~替换为@？就像@padaleiana是的，我试过了！通过附加您提到的错误更新您的问题。@padaleiana问题已更新！

numxt.config.js

中的css属性为空。尝试从插件中删除你的scss导入，并将它们放入我说的属性中，如