Nuxt.js问题：window/document未定义，process.client始终为false求助

我太懂你这种查了一堆资料还是卡壳的困扰了——想通过window.innerWidth判断移动端来控制DOM显示，结果process.client一直返回false，连客户端的代码都跑不起来。别着急，我来帮你搞定这个问题。

首先咱们得搞清楚核心问题：在Nuxt里，虽然mounted钩子本身就是只在客户端执行的，但有时候因为环境变量注入的细节问题，process.client可能没法正确识别客户端环境。更可靠的方式是用Nuxt实例提供的this.$nuxt.isClient来判断，这个属性是Nuxt专门用来区分客户端/服务端的，比直接用process.client稳定得多。

下面给你几个具体的解决方案：

方案1：替换process.client为$nuxt.isClient，同时完善窗口监听 #

直接修改你的组件代码，换成下面这样：

data() {
  return {
    isMobile: false,
    resizeHandler: null // 存一下监听函数，方便销毁时移除
  };
},
mounted() {
  if (this.$nuxt.isClient) {
    console.log("终于跑到客户端环境了！");
    // 初始化移动端判断
    this.isMobile = window.innerWidth < 768;
    // 监听窗口大小变化，适配用户缩放窗口的场景
    this.resizeHandler = () => {
      this.isMobile = window.innerWidth < 768;
    };
    window.addEventListener('resize', this.resizeHandler);
  }
  console.log('当前是否为客户端:', this.$nuxt.isClient);
},
beforeDestroy() {
  // 组件销毁时移除监听，避免内存泄漏
  if (this.$nuxt.isClient && this.resizeHandler) {
    window.removeEventListener('resize', this.resizeHandler);
  }
}

这样不仅能正确识别客户端环境，还能处理窗口缩放的情况，保证isMobile变量能实时更新。

方案2：用客户端专属插件统一处理 #

如果你的项目里有多处需要判断移动端，可以把逻辑抽成客户端插件，避免重复代码：

1. 在项目根目录的plugins文件夹下创建client-device.js文件：

export default ({ app }) => {
  app.mixin({
    data() {
      return {
        isMobile: false,
        resizeHandler: null
      };
    },
    mounted() {
      this.isMobile = window.innerWidth < 768;
      this.resizeHandler = () => {
        this.isMobile = window.innerWidth < 768;
      };
      window.addEventListener('resize', this.resizeHandler);
    },
    beforeDestroy() {
      if (this.resizeHandler) {
        window.removeEventListener('resize', this.resizeHandler);
      }
    }
  });
};

2. 在nuxt.config.js里注册这个插件，指定mode: 'client'确保只在客户端加载：

export default {
  // 其他配置...
  plugins: [
    { src: '~/plugins/client-device.js', mode: 'client' }
  ]
};

之后你在任意组件里都能直接用isMobile变量了，不用再重复写判断逻辑。

为什么process.client会返回false？ #

大概率是因为Nuxt的环境变量注入机制在某些场景下（比如特定版本、自定义配置）没有把process.client正确暴露给客户端。而this.$nuxt.isClient是Nuxt核心实例自带的属性，不受这些配置影响，所以更可靠。

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