VueEditor 文档未定义 Nuxt.js

Question

在我的 Nuxt.js 项目中，我安装了 vue2-editor 包以便能够用 HTML 写文章。当我来到页面时，写一些东西并按下按钮一切正常，但是当我重新加载页面时，我得到 document is not defined 错误。

代码如下：

<template>
  <div>
    <SideBar />
    <div class='content'>
      <h1>Write article</h1>
      <client-only>
        <VueEditor
          v-model='articleContent'
        />
      </client-only>
      <div style='margin-top: 15px'><button @click='postArticle'>Post article</button></div>
    </div>
  </div>
</template>

<script>
import { VueEditor } from 'vue2-editor';
import SideBar from '../components/SideBar';
export default {
  name: 'Articles',
  components: {
    SideBar,
    VueEditor
  },
  data() {
    return {
      articleContent: null,
    }
  },
  methods: {
    postArticle() {
      console.log(this.articleContent)
    },
  },
}
</script>

错误看起来像这样：

我还在文档中发现，对于 Nuxt.js 项目，vue2-editor 应该添加到 modules，我做到了，但它仍然不起作用：

  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    'vue2-editor/nuxt'
  ],

Answer 1

请按照以下步骤将该插件添加到您的 Nuxt

将有 plugins 文件夹，就像 pages 和 components，如果没有创建一个并添加一个 js 文件到其中 vue2-editor.js。

将以下内容复制到vue2-editor.js

  import Vue from "vue";
  import Vue2Editor from "vue2-editor";

  Vue.use(Vue2Editor);

在 nuxt.config.js 中从模块中删除 'vue2-editor/nuxt' 并创建一个名为插件的单独数组，如下所示

  /*
  ** Plugins to load before mounting the App
  */
 plugins: [{ src: "~/plugins/vue2-editor", mode: 'client' }],

大功告成。现在您可以开始在任何 vue 文件中使用它，例如

  <vue-editor placeholder="Write Something..." v-model="content"></vue-editor>

Answer 2

你可以试试动态加载：

<template>
  <div>
    <SideBar />
    <div class='content'>
      <h1>Write article</h1>
      <client-only>
        <VueEditor
          v-model='articleContent'
        />
      </client-only>
      <div style='margin-top: 15px'><button @click='postArticle'>Post article</button></div>
    </div>
  </div>
</template>

<script>
import SideBar from '../components/SideBar';
export default {
  name: 'Articles',
  components: {
    SideBar,
    VueEditor: () => process.client ? (await import("vue2-editor")).VueEditor : ""
  },
  data() {
    return {
      articleContent: null,
    }
  },
  methods: {
    postArticle() {
      console.log(this.articleContent)
    },
  },
}
</script>

VueEditor 文档未定义 Nuxt.js

VueEditor document is not defined Nuxt.js

html

javascript

vue.js

nuxt.js