Nuxt.js项目使用vue2-editor刷新报document is not defined错误如何解决

问题原因 #

Nuxt.js 默认开启服务端渲染(SSR)，vue2-editor 依赖浏览器端的 document 对象，你在页面顶层直接导入组件时，服务端渲染阶段就会加载执行相关代码，而服务端不存在 document 对象，因此刷新页面（触发服务端渲染）时就会抛出对应错误。你添加的 <client-only> 标签只能保证组件不在服务端渲染，无法阻止顶层导入的代码在服务端执行。

解决方案 #

方案1（推荐）：移除页面内的主动导入

你已经在 nuxt.config.js 的 modules 中添加了 vue2-editor/nuxt，该配置会自动完成客户端侧的组件全局注册，你不需要在页面中手动导入和注册 VueEditor，直接删除 script 中对应的导入和注册代码即可：

// 删除以下两行代码
// import { VueEditor } from 'vue2-editor';
// 以及 components 配置项里的 VueEditor 注册逻辑

修改后你的页面 script 代码如下：

import SideBar from '../components/SideBar';
export default {
  name: 'Articles',
  components: {
    SideBar
  },
  data() {
    return {
      articleContent: null,
    }
  },
  methods: {
    postArticle() {
      console.log(this.articleContent)
    },
  },
}

原有模板代码无需改动，保留 <client-only> 标签即可。

方案2：使用动态异步导入

如果你不想通过 modules 全局注册组件，也可以将组件改为客户端侧动态导入，移除顶层的 VueEditor 导入语句，修改 components 注册逻辑即可：

import SideBar from '../components/SideBar';
export default {
  name: 'Articles',
  components: {
    SideBar,
    // 仅在客户端环境动态导入组件
    VueEditor: process.client ? () => import('vue2-editor').then(m => m.VueEditor) : {}
  },
  data() {
    return {
      articleContent: null,
    }
  },
  methods: {
    postArticle() {
      console.log(this.articleContent)
    },
  },
}

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