Nuxt.js 中的“文档未定义”

Question

我正在尝试在 Vue 组件中使用Choices.js 。 组件编译成功，但随后触发错误：

[vue-router] 无法解析异步组件默认值：ReferenceError：文档未定义

在浏览器中我看到：

ReferenceError 文档未定义

我认为这与 Nuxt.js 中的 SSR 有关吗？ 我只需要 Choices.js 在客户端上运行，因为我猜它是客户端唯一的方面。

nuxt.config.js

build: {
  vendor: ['choices.js']
}

AppCountrySelect.vue

<script>
import Choices from 'choices.js'

export default {
  name: 'CountrySelect',
  created () {
    console.log(this.$refs, Choices)
    const choices = new Choices(this.$refs.select)
    console.log(choices)
  }
}
</script>

在经典的 Vue 中，这可以正常工作，所以我仍然非常了解如何让 Nuxt.js 以这种方式工作。

我哪里出错了有什么想法吗？

谢谢。

Answer 1

当您启动 Nuxt 项目时，这是一个常见错误；-)

Choices.js库仅适用于客户端！ 所以 Nuxt 尝试从服务器端渲染，但是从 Node.js 的window.document不存在，那么你有一个错误。
注意： window.document只能从浏览器渲染器获得。

从Nuxt 1.0.0 RC7 开始，您可以使用<no-ssr>元素来允许您的组件仅用于客户端。

<template>
  <div>
    <no-ssr placeholder="loading...">
      <your-component>
    </no-ssr>
  </div>
</template>

看看这里的官方示例： https ://github.com/nuxt/nuxt.js/blob/dev/examples/no-ssr/pages/index.vue

---

更新：

由于Nuxt >= 2.9.0 ，您必须使用<client-only>元素而不是<no-ssr> ：

<template>
  <div>
    <client-only placeholder="loading...">
      <your-component>
    </client-only>
  </div>
</template>

要了解更多信息，请参阅 nuxt 文档： https ://nuxtjs.org/docs/2.x/features/nuxt-components#the-client-only-component

Answer 2

接受的答案（虽然正确）太短了，我无法理解和正确使用它，所以我写了一个更详细的版本。 我一直在寻找一种使用plotly.js + nuxt.js的方法，但它应该与OP的Choice.js + nuxt.js问题相同。

我的组件.vue

<template>
  <div>
    <client-only>
      <my-chart></my-chart>
    </client-only>
  </div>
</template>
<script>
export default {
  components: {
    // this different (webpack) import did the trick together with <no-ssr>:
    'my-chart': () => import('@/components/MyChart.vue')
  }
}
</script>

MyChart.vue

<template>
  <div>
  </div>
</template>
<script>
import Plotly from 'plotly.js/dist/plotly'
export default {
  mounted () {
    // exists only on client:
    console.log(Plotly)
  },
  components: {
    Plotly
  }
}
</script>

更新：在 Nuxt v>2.9.0 中有<client-only>标签而不是<no-ssr> ，请参阅@Kaz 的评论。

Answer 3

您需要将其添加为插件，然后为其禁用 SSR。

由于文档和窗口未在服务器端定义。

您的 nuxt.config.js 应该如下所示

plugins: [
  { src: '~/plugins/choices.js' } // both sides
  { src: '~/plugins/client-only.js', mode: 'client' }, // only on client side
  { src: '~/plugins/server-only.js', mode: 'server' } // only on server side
],

Answer 4

我发现现在 no-ssr 被替换为 ，我正在使用 echart 并且有同样的问题，但现在它可以工作了！

    <client-only>
        <chart-component></chart-component>
    </client-only>

Answer 5

我在 lightgallery.js 添加模式时遇到了这个错误：'client' 似乎有帮助

nuxt.config.js

 plugins: [
    { src: '~/plugins/lightgallery.js',  mode: 'client' }
  ],

插件/lightgallery.js

import Vue from 'vue'
import lightGallery from 'lightgallery.js/dist/js/lightgallery.min.js'
import 'lightgallery.js/dist/css/lightgallery.min.css'

Vue.use(lightGallery)

图片库.vue

<template>
  <section class="image-gallery-container">
    <div class="image-gallery-row">
      <div
        ref="lightgallery"
        class="image-gallery"
      >
        <a
          v-for="image in group.images"
          :key="image.mediaItemUrl"
          :href="image.mediaItemUrl"
          class="image-gallery__link"
        >
          <img
            :src="image.sourceUrl"
            :alt="image.altText"
            class="image-gallery__image"
          >
        </a>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'ImageGallery',
  props: {
    group: {
      type: Object,
      required: true
    }
  },
  mounted() {
    let vm = this;

    if (this.group && vm.$refs.lightgallery !== 'undefined') {
      window.lightGallery(this.$refs.lightgallery, {
        cssEasing: 'cubic-bezier(0.680, -0.550, 0.265, 1.550)'
      });
    }
  }
}
</script>

Answer 6

<script>
import Choices from 'choices.js'

export default {
  name: 'CountrySelect',
  created () {
    if(process.client) {
      console.log(this.$refs, Choices)
      const choices = new Choices(this.$refs.select)
      console.log(choices)
    }
  }
}
</script>

我想这应该会有所帮助，nuxt 在服务器上渲染后会触及计算的内部，并且将定义窗口

Answer 7

这个线程有点老了，但我会把我的解决方案留在这里，所以也许有人会觉得它有用。

我最近对vue-star-rating和其他几个插件也有类似的问题。

---

可以根据插件名称、导入/使用设置遵循和调整以下步骤：

1. 转到您的插件文件夹并创建新的js文件，在本例中vue-star-rating.js ，然后对其进行编辑以设置插件：

---

import Vue from 'vue'
import VueStarRating from 'vue-star-rating'

Vue.component('vue-star-rating', VueStarRating); //<--- the name you used to register the plugin will be the same to use when in the component (vue-star-rating)

2. 转到您的nuxt.config.js文件并添加插件：

---

  plugins: [{
      src: '~/plugins/vue-star-rating', // <--- file name
      mode: 'client'
    },
    //you can simply keep adding plugins like this:
    {
      src: '~/plugins/vue-slider-component',
      mode: 'client'
    }]

3. 现在您已准备好在应用程序的任何位置使用该插件。 但是，要做到这一点，您需要将其包装在容器<client-only>中。 例子：

---

<client-only placeholder="loading...">
   <vue-star-rating />
</client-only>

---

笔记：

您不需要在本地将任何内容导入组件，只需像上面那样使用它就可以解决问题。

请确保在第 1 步和第 3 步这两个地方都以相同的方式命名插件。在这种情况下，它将是vue-star-rating 。

Answer 8

如果您仍然想这样做，可以通过以下方式获取文档对象：

const d = typeof document === 'undefined' ? null : document

Answer 9

为了完整起见，值得一提的是，除了Yusuf Adeyemo 答案中的对象语法（我更喜欢它，因为它将文件与使用方式分开），您还可以将插件设置为仅通过命名文件在客户端或服务器端运行像这样：

export default {
  plugins: [
    '~/plugins/foo.client.js', // only in client side
    '~/plugins/bar.server.js', // only in server side
    '~/plugins/baz.js' // both client & server
  ]
}

src： https ://nuxtjs.org/docs/directory-structure/plugins/#client-or-server-side-only

Answer 10

除了这里的所有答案之外，您还可以面对一些其他与 SSR 不兼容的开箱即用的软件包（例如您的情况），并且需要一些技巧才能正常工作。 这是我的详细回答。

TLDR 是您有时需要：

• 使用process.client
• 使用<client-only>标签（小心，它不会渲染但仍然执行里面的代码）
• 如果以后需要，请使用动态导入，例如const Ace = await import('ace-builds/src-noconflict/ace')
• 有条件地加载组件components: { [process.client && 'VueEditor']: () => import('vue2-editor') }

有了所有这些，您几乎可以应对所有可能的情况。

Answer 11

我试图在created的钩子中访问document ，所以当我将逻辑从created的钩子移动到mounted的钩子时，我的问题就解决了。