Vue项目created钩子异步报错：ReferenceError: document is not defined求助

错误根源 #

这个ReferenceError: document is not defined错误出现在Vue组件的created钩子中，结合代码里的fetch方法和layout配置，判断你使用的是Nuxt.js（服务端渲染框架）。

在Nuxt的服务端渲染流程中，created钩子会在服务器端执行，但服务器环境不存在浏览器专属的document对象。错误的触发点有两种可能：

• jQuery导入问题：你直接在组件顶部import $ from 'jquery'，jQuery初始化时会尝试访问document，服务端环境无此对象，直接触发报错。
• 子组件生命周期代码问题：你引入的DocumentViewHeader或citation-card组件，在它们的created/beforeMount钩子中访问了document/window等浏览器API，父组件created执行时会触发子组件生命周期，从而在服务端抛出错误。

解决步骤 #

1. 修复jQuery的导入方式 #

不要在服务端加载jQuery，改用客户端专属的导入方式：

• 方式一：在mounted钩子中动态导入

mounted() {
  import('jquery').then($ => {
    // 在此处使用jQuery操作DOM
  })
}

• 方式二：通过Nuxt插件配置客户端加载
  在plugins目录新建jquery.client.js文件：

import $ from 'jquery'
window.$ = $

然后在nuxt.config.js中注册插件：

export default {
  plugins: ['~/plugins/jquery.client.js']
}

2. 检查并修复子组件代码 #

找到DocumentViewHeader和citation-card组件，调整其生命周期代码：

• 将所有涉及document/window的代码，从created/beforeMount移到mounted钩子（mounted仅在客户端执行）。
• 若必须在created中执行，用process.client判断仅在客户端运行：

created() {
  if (process.client) {
    // 此处编写需要访问document的代码
  }
}

3. API调用验证 #

你的getDataFromServer方法是纯axios请求，不涉及浏览器API，无需修改。

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