Betulkan kaedah navigator/tetingkap/dokumen yang tidak ditentukan dalam Nuxt

Question

Saya cuba menentukan maklumat UserAgent dan Retina di dalam aplikasi Nuxt. Tetapi aplikasi melemparkan ralat dan mengatakan navigasi/tetingkap tidak ditentukan. Bagaimanakah saya boleh mendapatkan maklumat ini dalam aplikasi 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

Ini adalah penyelesaian untuk membaiki:

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

---

Ini adalah contoh cara membungkus kod JS logik

sssccc

Nampak seperti ini: https://nuxtjs.org/docs/2. x/glosari-dalaman/konteks

PS: mounted + process.client 有点多余，因为 mounted Hanya berjalan pada klien.

---

Selain itu, ia juga merupakan idea yang baik untuk membalut komponen dalam <client-only> jika anda mahu komponen itu dipaparkan hanya pada bahagian pelanggan.

Dokumentasi untuk ini boleh didapati di: https://nuxtjs.org/docs/2.x/features/nuxt-components/#the-client-only-component

PS: Sila ambil perhatian bahawa kerana tag client-only ini hanya akan melangkau pemaparan, bukan pelaksanaan, seperti yang dijelaskan di sini.

---

Sesetengah pakej tidak menyokong SSR apabila mengimport, untuk ini anda boleh:

• Gunakan syarat dalam import dinamik (jika anda mahu menggunakan perpustakaan nanti)
• Secara langsung seperti ini (jika anda ingin memuatkan komponen seperti vue-editor)

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