如何修复导航器 /窗口 /文档在NUXT中不确定

Question

我试图确定NUXT应用程序中的用户和视网膜信息。但是该应用程序正在抛出错误，显示Navigatior /窗口不确定。如何在NUXT应用程序中获取这些信息？

const userAgent = navigator.userAgent.toLowerCase()
const isAndroid = userAgent.includes('android')

isRetina() {
  let mediaQuery
  if (typeof window !== 'undefined' && window !== null) {
    mediaQuery =
      '(-webkit-min-device-pixel-ratio: 1.25), (min--moz-device-pixel-ratio: 1.25), (-o-min-device-pixel-ratio: 5/4), (min-resolution: 1.25dppx)'
    if (window.devicePixelRatio > 1.25) {
      return true
    }
    if (window.matchMedia && window.matchMedia(mediaQuery).matches) {
      return true
    }
  }
  return false
}

Answer 1

这是修复的解决方案：

• 导航器是未定义的
• 窗口是未定义的
• 文档未定义

---

这是有关如何包装逻辑JS的示例 https://nuxtjs.s.org/docs/2.x/

<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>

如下所示： internals-glossary/context

ps：已安装 + process.client 有点冗余，因为已安装仅在客户端。

---

另外，将组件包装到＆lt; climly-gt; 如果您只想使用它的客户端也是一个好主意。

<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>

此文件的文档在这里：

ps：当心，因为此 client> client> client-inly tag只能跳过渲染，而不是执行，为在此处解释。

---

当您 import 它们时，有些软件包不支持

• SSR import （如果要在以后使用库），
• 则直接与此”（如果您想加载 vue-editor ）

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