Question

我在用nuxtjs实现v-owl-carousel时遇到问题。

当我尝试：

import carousel from 'v-owl-carousel'

出现错误消息

文档未定义

我遵循了https://github.com/93gaurav93/v-owl-carousel页上的配置建议，但无济于事...

有人可以帮助我吗？有人可以给我一个曲目吗？

配置空项目

{
  "name": "nuxtjs_test_owl_carousel",
  "version": "1.0.0",
  "description": "My gnarly Nuxt.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "cross-env": "^5.2.0",
    "nuxt": "^2.4.0",
    "v-owl-carousel": "^1.0.8"
  },
  "devDependencies": {
    "nodemon": "^1.18.9"
  }
}

Answer 1

https://nuxtjs.org/faq/window-document-undefined/

这是由于服务器端渲染。如果您需要指定   您只想在客户端上导入资源，则需要使用   process.client变量。

例如，在您的.vue文件中：

如果（process.client）{require（'external_library'）}

Answer 2

Owl carousel 不支持 SSR（服务器端渲染），您必须按照以下示例使用：

<no-ssr> <!-- important to add no-ssr-->
  <carousel :options>
    ...content
  </carousel>
</no-ssr>

nuxtjs中的owl-carousel实现问题

2 个答案: