Nuxt项目注册Quill及图片缩放模块报document未定义问题问询

该错误由Nuxt服务端渲染特性导致：你当前在脚本顶层静态导入Quill的代码会同时在服务端和客户端环境执行，而服务端没有浏览器的document、window等DOM对象，因此抛出document is not defined报错。

方案1：页面内单独适配（仅单页面使用编辑器时推荐） #

直接修改页面代码，将所有和Quill、图片缩放插件相关的逻辑都移入客户端判断块中，修改后完整代码如下：

<template>
  <div>
    <client-only> 
      <vue-editor 
        class="editor" 
        v-model="arr['desc']"
        :editor-options="editorOptions"
      />
    </client-only>
  </div>
</template>

<script>
let VueEditor
if (process.client) {
  VueEditor = require('vue2-editor').VueEditor
  const Quill = require('quill')
  window.Quill = Quill
  const ImageResize = require('quill-image-resize-module').default
  Quill.register('modules/imageResize', ImageResize)
}
export default {
  data() {
    return {
      arr: {},
      editorOptions: {
        modules: {
          // 启用图片缩放模块，可自行添加配置参数
          imageResize: {}
        }
      }
    }
  },
  components: { VueEditor },
}
</script>

方案2：全局插件适配（多页面使用编辑器时推荐） #

1. 在项目plugins目录下新建vue2-editor.client.js文件，写入以下内容：

import Vue from 'vue'
import { VueEditor } from 'vue2-editor'
import Quill from 'quill'
import ImageResize from 'quill-image-resize-module'

Quill.register('modules/imageResize', ImageResize)
Vue.component('VueEditor', VueEditor)

2. 修改nuxt.config.js配置，添加webpack全局注入规则避免Quill识别异常：

const webpack = require('webpack')

export default {
  // 其他原有配置保持不变
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      })
    ]
  }
}

配置完成后无需在页面内单独导入VueEditor，直接在模板中使用组件即可。

内容的提问来源于stack exchange，提问作者Shubhang Chourasia