Nuxt js - 窗口或文档未定义

Question

我看到很多与这个主题相关的问题。但他们都没有解决我的问题。

我遇到一种情况，我必须检查innerWidth窗口的，以检查设备是否是移动的或不使用isMobile变量。

<div v-if="isMobile" class="stores">
   <p class="text-uppercase text-muted mb-0 mt-4">
      ...
   </p>
</div>

下面是我的脚本代码。我正在检查，process.client但它即将到来false。我不知道我是否错过了需要在某处添加的内容（也许是 nuxt.config.js）。

    data() {
      return {
        isMobile: false,
      };
    },
    mounted() {
      if (process.client) {
        console.log("Hello from the client!");
        this.isMobile = window.innerWidth < 768;
      }
      console.log('process', process.client); // Logs as false
    },

Answer 1

你的代码没有任何问题。它按其应有的方式工作。让我解释。

您在控制台中看到该文本吗Nuxt SSR？这意味着下面的输出是console.log在服务器端执行的结果，而不是在客户端执行的结果。如果您查看此块下方的控制台，Nuxt SSR您应该会看到另一个输出 -process false或者process true取决于您当前的窗口宽度。

不相信？尝试用这个替换那个代码，我想你会相信我的。

created() {
  if (process.client) {
    console.log("Hello from the client!")
  }
  console.log("Hello from the server... and also the client!")
}

它应该输出这个。

也许您想将该created()函数替换为mounted()becausecreated()在服务器端和客户端都被调用。并且mounted()仅在安装该组件/页面时在客户端调用。这样你就不必检查是否process.client在true服务器端。情况总是如此false，因此没有必要进行该检查。