Question

我正在尝试在Nuxt SSR项目中使用Vue Quill Editor。但是，它给了我“ ReferenceError dcument未定义”

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

error message screenshot

我还尝试了动态导入组件

<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

但在浏览器中运行 runs in browser but doesn't shows Text Editor screenshot

我需要一个在Markdown中输出的文本编辑器。欢迎对此包进行任何替换。

Answer 1

用作插件。

在plugins文件夹中创建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}
    ]

}

未定义Nuxt SSR vue-quill-editor ReferenceError文档

1 个答案: