为什么 Nuxt 应用程序中导航器、窗口和文档未定义？

如何解决 Nuxt 应用程序中未定义的导航器、窗口和文档

简介

开发人员经常遇到 Nuxt 应用程序中导航器、窗口和文档未定义的错误。当尝试访问与浏览器相关的信息（例如 UserAgent 或 Retina 信息）时，会出现此问题。

解决方案

要解决此问题，请将您的 JavaScript 代码包装在特定结构中以确保仅在客户端正确执行。

使用 Mounted() Hook 和 process.client 包装代码

<script>
import { jsPlumb } from 'jsplumb'; // client-side library only, no SSR support

export default {
  mounted() {
    if (process.client) {
      // your JS code here like >> jsPlumb.ready(function () {})
    }
  },
}
</script>

利用仅客户端组件

<template>
  <div>
    <p>this will be rendered on both: server + client</p>
    
    <client-only>
      <p>this one will only be rendered on client</p>
    </client-only>
  </div>
</template>

处理不支持的 SSR 包

对于导入时不支持 SSR 的库，请考虑使用动态导入或直接加载：

export default {
  components: {
    [process.client & && 'VueEditor']: () => import('vue2-editor'),
  }
}

其他提示

• 避免将组件包装在中如果您不想阻止渲染。
• 动态导入适合应用程序稍后使用的库。
• 请参阅官方 Nuxt 文档以获取进一步指导 (https://nuxtjs. org/docs/2.x/features/nuxt-components/#the-client-only-component)

以上是为什么 Nuxt 应用程序中导航器、窗口和文档未定义？的详细内容。更多信息请关注PHP中文网其他相关文章！