如何仅在客户端使用Nuxt head？解决window未定义报错

你的问题出在Nuxt的服务端渲染机制上：head()方法会在服务端执行，而服务端环境根本没有window对象，所以触发了window is not defined错误。下面是几种可行的解决办法：

方法一：用Nuxt内置环境变量判断客户端 #

直接在head()里通过process.client判断当前是否在客户端环境，这个变量是Nuxt原生提供的，服务端和客户端都能识别。

修改后的代码：

head() {
  if (process.client && window.loadScript) {
    return {
      script: [
        {
          src: "https://some-api.com/min.js",
          type: "text/javascript",
          callback: function () {
            console.log("loaded")
          },
        },
      ],
    }
  }
  // 服务端返回空对象，避免无效渲染
  return {}
},

这样只有在客户端时才会返回脚本配置，服务端不会执行涉及window的逻辑，自然不会报错。

方法二：在客户端生命周期钩子动态加脚本 #

如果不想在head()里处理，也可以用mounted钩子（仅客户端执行）动态创建脚本标签，完全避开服务端执行环节。

示例代码：

mounted() {
  if (window.loadScript) {
    const script = document.createElement('script')
    script.src = "https://some-api.com/min.js"
    script.type = "text/javascript"
    script.onload = () => console.log("loaded")
    document.head.appendChild(script)
  }
}

mounted触发时DOM已经就绪，window对象肯定存在，直接用原生JS操作DOM添加脚本，效果和head()里配置一致。

方法三：全局插件（多页面复用场景） #

如果这个脚本需要在多个页面加载，建议把逻辑封装成客户端插件：

1. 创建plugins/load-external-script.js文件：

export default function () {
  if (window.loadScript) {
    const script = document.createElement('script')
    script.src = "https://some-api.com/min.js"
    script.type = "text/javascript"
    script.onload = () => console.log("loaded")
    document.head.appendChild(script)
  }
}

2. 在nuxt.config.js里配置插件为仅客户端运行：

export default {
  plugins: [
    { src: '~/plugins/load-external-script.js', mode: 'client' }
  ]
}

通过mode: 'client'指定插件只在客户端执行，既避免了服务端的window错误，又能全局复用加载逻辑。

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