[Vue警告]：beforeCreate钩子中的错误："ReferenceError:文档未定义“

Question

这可能是一个很长的机会，但我不知道哪里出了问题。希望有人能给我指路。

我在我的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>

Answer 1

组件尝试访问DOM，而Nuxt则在服务器端呈现页面，解决方案是将其包装在client-only中

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

Answer 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);

然后在你的组件中使用它。