VueEditor 文档没有定义 Nuxt.js

Posted 2023-02-22

【中文标题】VueEditor 文档没有定义 Nuxt.js

【英文标题】：VueEditor document is not defined Nuxt.js

【发布时间】：2021-11-29 12:05:52

【问题描述】：

在我的 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'
  ],

【问题讨论】：

这能回答你的问题吗？ How to fix navigator / window / document is undefined in Nuxt

您好，下次发问题前请先快速搜索一下。

【参考方案1】：

你可以尝试动态加载：

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

【参考方案2】：

请按照以下步骤将该插件添加到您的 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 的单独数组，如下所示

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