Nuxt应用直接访问对应页面时Vue2Editor无法正常加载问题求助

问题原因 #

Vue2Editor依赖浏览器端的window/document对象，直接访问页面时Nuxt会先走服务端渲染（SSR）逻辑，服务端没有浏览器相关API就会抛出异常；而应用内跳转属于客户端路由导航，不会触发服务端渲染，所以运行正常。你之前的配置虽然在插件里做了客户端判断，但页面中直接静态导入了vue2-editor，服务端渲染页面时还是会执行导入逻辑，依然会触发报错。

解决方案 #

这里提供两种适配方案，按需选择即可：

方案1：全局注册（适合多个页面使用编辑器的场景）

1. 修改nuxt.config.js中的插件配置，将ssr设为false，明确该插件仅在客户端加载：

plugins: [{src: './plugins/vue2-editor', ssr: false}]

2. 简化plugins/vue2-editor.js代码，已经配置ssr:false无需再做环境判断：

import Vue from 'vue'
import VueEditor from 'vue2-editor'
Vue.use(VueEditor)

3. 修改页面文件my_page.vue，删除重复的导入注册逻辑，用client-only标签包裹组件确保仅客户端渲染：

<template>
  <div>
    <client-only>
      <vue-editor></vue-editor>
    </client-only>
  </div>
</template>
<script>
export default {
  // 删掉原本的VueEditor导入和components注册逻辑，保留其他业务代码即可
}
</script>

方案2：单页面局部注册（仅当前页面使用编辑器的场景）

1. 删掉nuxt.config.js里的vue2-editor相关插件配置，删除plugins/vue2-editor.js文件，无需全局注册。
2. 直接在my_page.vue中做客户端动态导入即可：

<template>
  <div>
    <client-only>
      <vue-editor></vue-editor>
    </client-only>
  </div>
</template>
<script>
export default {
  components: {
    VueEditor: () => process.client ? import('vue2-editor').then(m => m.VueEditor) : null
  }
  // 其他业务逻辑保留即可
}
</script>

修改完成后重启Nuxt服务，直接访问和路由跳转场景都可以正常加载组件。

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