Nuxt SSR vue-quill-editor参考错误文档未定义。

Question

我试图在我的Nuxt SSR项目中使用Vue Quill Editor。但是，它给我的提示是 "ReferenceError dcument not defined"。

<template>
  <section class="px-6">
    <h1>This is weird</h1>
    <no-ssr placeholder="Loading...">
      <p>startof</p>
      <quillEditor v-model="value" />
      <p>endof</p>
    </no-ssr>
  </section>
</template>

<script>
import 'quill/dist/quill.snow.css'
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    // quillEditor
  },
  data: () => ({
    value: ''
  })
}
</script>

错误信息截图

我也试过动态导入组件。

<template>
  <section class="px-6">
    <h1>This is weird</h1>
    <no-ssr placeholder="Loading...">
      <p>startof</p>
      <quillEditor v-model="value" />
      <p>endof</p>
    </no-ssr>
  </section>
</template>

<script>
export default {
  components: {
    quillEditor: () => import('vue-quill-editor')
  },
  data: () => ({
    value: ''
  })
}
</script>

在我的控制台中出现了错误

ERROR  [Vue warn]: Failed to resolve async component: () => Promise.resolve(/*! import() */).then(__webpack_require__.t.bind(null, /*! vue-quill-editor */ "vue-quill-editor", 7))
Reason: ReferenceError: document is not defined

但在浏览器中运行在浏览器中运行但不显示文本编辑器屏幕截图

我需要一个能用Markdown输出的文本编辑器。欢迎任何替代这个包的软件。

Answer 1

作为插件使用。

将vue-quill-editor.js放在插件文件夹中。

import Vue from 'vue'
import Quill from 'quill'
import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'


Vue.use(VueQuillEditor)

在nuxt.config.js中注册

module.exports = {
    env : {}
    build: {
        new webpack.ProvidePlugin({
            'window.Quill': 'quill/dist/quill.js',
            'Quill': 'quill/dist/quill.js'
        }),
    },
    plugins: [
        { src: '~plugins/vue-quill-editor', ssr: false}
    ]

}