Javascript &引用；“未定义文档”；在Nuxt.js中

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

[vue路由器]无法解析异步组件默认值： 引用错误：未定义文档

在浏览器中，我看到：

未定义ReferenceError文档

我认为这与Nuxt.js中的SSR有关？我只需要Choices.js在客户机上运行，因为我想这是一个客户机特有的特性

numxt.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>

<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>

<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>

从“Choices.js”导入选项
导出默认值{
名称：“CountrySelect”，
创建（）{
console.log（此.$refs，选项）
常量选项=新选项（此.$refs.select）
console.log（选项）
}
}

在经典的Vue中，这将很好地工作，所以我仍然在努力掌握如何让Nuxt.js以这种方式工作

你知道我哪里做错了吗

---

谢谢。

这是启动Nuxt项目时的常见错误；-）

js库仅适用于客户端！因此Nuxt尝试从服务器端渲染器，但从Node.js

window.document

不存在，则出现错误。
注意：

窗口。文档

仅从浏览器渲染器中可用

因为，您可以使用

元素只允许您的组件用于客户端

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

请看下面的官方示例：

---

更新：

因为，您必须使用

元素而不是

：

要了解更多信息，请参阅nuxt文档：

从“Choices.js”导入选项
导出默认值{
名称：“CountrySelect”，
创建（）{
if（process.client）{
console.log（此.$refs，选项）
常量选项=新选项（此.$refs.select）
console.log（选项）
}
}
}

我想这应该会有帮助，nuxt在服务器上呈现后将触及computed的内部，窗口将被定义

接受的答案（虽然正确）太短，我无法理解它并正确使用它，因此我编写了一个更详细的版本。我一直在寻找一种使用plotly.js+numxt.js的方法，但它应该与OP的problem of Choice.js+numxt.js相同

MyComponent.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>

<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>

<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>

导出默认值{
组成部分：{
//此不同的（网页包）导入与以下内容一起完成了此操作：
'我的图表'：（）=>导入（'@/components/MyChart.vue'）
}
}

MyChart.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>

<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>

<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>

从“Plotly.js/dist/Plotly”导入Plotly
导出默认值{
挂载（）{
//仅在客户端上存在：
console.log（Plotly）
},
组成部分：{
阴谋地
}
}

---

更新：有

标签而不是2.9.0，请参阅@Kaz的评论。

我发现现在无ssr被替换为，我正在使用echart，并且有相同的问题，但现在它工作了

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

---

您需要将其作为插件添加，然后为其禁用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
],

---

这个线程有点旧，但我将把我的解决方案留在这里，这样也许有人会觉得它有用

最近，我在vue star rating和其他插件方面也遇到了类似的问题

---

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

转到插件文件夹并创建新的

js

文件，在本例中为

vue star rating.js

，然后将其编辑为：

---

现在，您可以在应用程序中的任何位置使用该插件了。但是，要做到这一点，您需要将其包装在容器中。例如：

---

---

注意事项：

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

---

请确保在第1步和第3步中，您对插件的命名方式相同。在这种情况下，它将是

vue明星评级

我在lightgallery.js添加模式时出现此错误：“客户端” 似乎有帮助

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)

ImageGallery.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>

导出默认值{
名称：'ImageGallery'，
道具：{
组：{
类型：对象，
必填项：true
}
},
安装的（）{
让vm=这个；
if（this.group&&vm.$refs.lightgallery！==‘未定义’）{
window.lightGallery（此.$refs.lightGallery{
cssEasing:‘立方贝塞尔（0.680，-0.550,0.265,1.550）’
});
}
}
}

如果仍要执行此操作，则可以通过以下方式使用文档对象：

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

---

谢谢你！知道我如何用SSR输出元素本身吗？与中一样，一些JS需要在客户端处理选择列表，但我仍然希望在服务器上呈现实际的选择列表？我有YourComponent.vue:

从'Plotly.js/dist/Plotly'导出默认值{}

导入Plotly，它仍然以

文档未定义

插件：[{src:'~/plugins/vue notifications'，mode:'client'}]结束

对于那些像我一样仍在苦苦寻找解决方案的人，我建议这样做。@JeffBluemel你的解决方案救了我一天。我不得不在我的nuxt.config.js

{src:'~/plugins/vue izitoast'，mode:'client'}

@JeffBluemel中添加这个，你的解决方案是我为一个解决方案绞尽脑汁半天之后唯一有效的解决方案。我真的尝试了所有我能在网上找到的东西。这在我使用的时候起了作用。基本上没有ssr标签就足够了，但是有了这个库，我必须按照上面提到的方式导入@迈克尔。你能解释一下这种行为背后的原因吗import@BaldeepSinghKwatra不幸的是，据我所知，我是通过尝试/错误找到这个解决方案的