Nuxt.js引入vue-burger-menu插件遇document未定义问题求助

我之前也踩过类似的坑，核心问题是即便你给插件配置了ssr: false，组件里的静态导入还是会在服务端渲染阶段被解析，而服务端环境根本没有document对象，所以首次客户端 hydration 后暂时正常，但后续路由切换或重新渲染时就会触发报错。下面是经过验证的解决步骤：

1. 简化插件配置文件 #

你的插件文件里的process.browser判断其实是多余的——因为已经在nuxt.config.js里设置了ssr: false，这个插件只会在客户端执行。修改~/plugins/vue-burger-menu.js：

import Vue from 'vue'
import VueBurgerMenu from 'vue-burger-menu'

Vue.use(VueBurgerMenu)

2. 调整组件的使用方式（二选一即可） #

方案A：利用全局注册，禁用组件的服务端渲染 #

既然已经在插件里全局注册了vue-burger-menu的所有组件，你可以直接在template里使用Slide，无需局部导入。关键是给你的Nav组件加上ssr: false，告诉Nuxt不要在服务端渲染它：

<template lang="pug">
  Slide(right)
    nav.menu_vertical
</template>

<script>
export default {
  name: 'Nav',
  ssr: false // 这行是核心！
}
</script>

方案B：客户端动态导入组件 #

如果不想全局注册，也可以用动态导入的方式，让组件的导入逻辑仅在客户端执行：

<template lang="pug">
  Slide(right)
    nav.menu_vertical
</template>

<script>
export default {
  name: 'Nav',
  components: {
    // 动态导入，仅在客户端环境执行
    Slide: () => import('vue-burger-menu').then(mod => mod.Slide)
  },
  ssr: false // 同样建议加上这行，彻底规避服务端渲染
}
</script>

3. 清理过时的配置 #

Nuxt 2.4版本之后，build.vendor已经被废弃，直接删掉nuxt.config.js里的这行配置：

// 删掉这行无用配置！
build: { vendor: ['vue-burger-menu'] }

这样调整后，不管是首次刷新还是路由切换，都不会再出现document未定义的错误了——本质就是把所有和vue-burger-menu相关的代码，都限制在客户端环境执行，彻底避开服务端的环境差异。

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