直接访问页面时，Vue2Editor 在 Nuxt 应用程序中不起作用

Question

我在我的 Nuxt 应用程序中的单个页面上使用 Vue2Editor。每当我测试应用程序并从应用程序的另一个页面导航到该页面时，它都可以正常加载而没有任何问题。但是当我测试并尝试直接打开该页面时，该应用程序失败并出现以下错误。我试图动态导入 vue-editor 包，但到目前为止还没有奏效。有什么想法可以在尝试直接访问页面时使此导入在页面上正常工作吗？

nuxt.config.js

plugins: [{src: './plugins/vue2-editor', ssr: true}]

plugins/vue2-editor.js

import Vue from 'vue'

if (process.BROWSER_BUILD) {
    const VueEditor = require('vue2-editor')
    Vue.use(VueEditor)
}

my_page.vue

<template><div><vue-editor></vue-editor></div></template>
<script>
...
import { VueEditor } from 'vue2-editor';
components: {
     VueEditor
}
...
</script>

Answer 1

您可以尝试将组件包装为仅客户端吗？ 问题来了，当您直接访问页面时，您是服务器端渲染，并且服务器上不存在 document。

<client-only><vue-editor/></client-only>

如果不起作用，请尝试将插件设置为 ssr: false

plugins: [{src: './plugins/vue2-editor', ssr: false}]

Answer 2

您可以在本地导入，在客户端上使用以下内容

export default {
  components: {
    [process.browser && 'VueEditor']: () => import('vue2-editor'),
  }
}

而不是在全局范围内定义它（特别是如果您只在几页中使用它）。

否则，将其包装在 <client-only> 标记之间也是一个好主意。
更详细的回答available here。