Correction de la méthode non définie du navigateur/fenêtre/document dans Nuxt

Question

J'essaie de déterminer les informations UserAgent et Retina dans une application Nuxt. Mais l'application génère une erreur et indique que la navigation/la fenêtre n'est pas définie. Comment obtenir ces informations dans une application 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

Voici la solution à corriger :

• navigator 未定义
• window 未定义
• 文档未定义

---

Ceci est un exemple sur la façon d'envelopper du code JS logique

sssccc

Ça ressemble à ça : https://nuxtjs.org/docs/2. x/glossaire-internes/context

PS : mounted + process.client 有点多余，因为 mounted Fonctionne uniquement sur client.

---

C'est également une bonne idée d'envelopper le composant dans <client-only> si vous souhaitez que le composant soit rendu uniquement côté client.

La documentation à ce sujet est disponible sur : https://nuxtjs.org/docs/2.x/features/nuxt-components/#the-client-only-component

PS : Veuillez noter cela, car cette balise client-only ignorera uniquement le rendu, pas l'exécution, comme expliqué ici.

---

Certains packages ne prennent pas en charge SSR lors de l'importation, pour cela vous pouvez :

• Conditions d'utilisation dans importation dynamique (si vous souhaitez utiliser la bibliothèque plus tard)
• Directement comme ça (si vous souhaitez charger un composant comme vue-editor)

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