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!")
}

它应该输出这个。

也许您想用mounted() 替换created() 函数，因为created() 在服务器端和客户端都被调用。并且mounted() 仅在该组件/页面被挂载时在客户端被调用。这样您就不必在服务器端检查process.client 是否为true。永远是false，所以没有必要做那个检查。