[Vue警告]:beforeCreate挂钩中出现错误:“ ReferenceError:未定义文档”

时间:2020-06-14 11:01:30

标签: javascript vue.js nuxt.js document

这可能是一个长镜头,但我无法弄清楚出了什么问题。希望有人能给我一些指示。

我正在Nuxt项目中使用vue快速编辑插件:https://github.com/A1rPun/vue-quick-edit

有时我会弹出错误消息:

[Vue警告]:beforeCreate挂钩中出现错误:“ ReferenceError:文档为 未定义”

这似乎仅在我第一次加载页面时发生(未经确认!),此后再也没有发生(使用ctrl + F5,以隐身方式加载,在其他浏览器中尝试...),这从未发生过。再次显示,该库运行正常。

但是,由于我不确定错误来自何处以及是否会影响我的最终用户,这让我犹豫不决。

这是我为使用嵌入式可编辑字段创建的组件:

<template>
  <quick-edit
    :aria-label="label"
    @input="updateValue"
  />
</template>

<script>
import QuickEdit from 'vue-quick-edit'

export default {
  components: { QuickEdit },
  props: {
    label: {
      type: String,
      required: true,
    },
  },
  methods: {
    updateValue (event) {
      // do something
    },
  },
}
</script>

<style lang="scss" scoped>

</style>

2 个答案:

答案 0 :(得分:2)

这是因为 Nuxt 首次在服务器端呈现页面,因此document实际上没有在服务器中定义。

您可以在nuxt.config.js中定义插件,并告诉nuxt仅在客户端中使用它:

nuxt.config.js中:

...
plugins: [
    { src: "~/plugins/quickEdit.js", ssr: false }
]
...

~/plugins/quickEdit.js中的

import Vue from "vue";
import QuickEdit from 'vue-quick-edit'

Vue.use(QuickEdit);

,然后在组件中使用它。

答案 1 :(得分:2)

当Nuxt在服务器端渲染页面时,该组件尝试访问DOM,解决方案是将其包装在client-only

<template>
  <client-only>
     <quick-edit
       :aria-label="label"
       @input="updateValue"
     />
  </client-only>
</template>