Mengapa Navigator, Tetingkap dan Dokumen Tidak Ditakrifkan dalam Aplikasi Nuxt?

Cara Menyelesaikan Navigator, Tetingkap dan Dokumen yang Tidak Ditakrifkan dalam Aplikasi Nuxt

Pengenalan

Pembangun sering menghadapi ralat di mana navigator, tetingkap dan dokumen kekal tidak ditentukan dalam aplikasi Nuxt. Isu ini timbul apabila cuba mengakses maklumat berkaitan penyemak imbas seperti maklumat UserAgent atau Retina.

Penyelesaian

Untuk menyelesaikan isu ini, bungkus kod JavaScript anda dalam struktur khusus untuk pastikan pelaksanaan yang betul pada bahagian pelanggan sahaja.

Balut Kod dengan Cangkuk Dipasang() dan proses.klien

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

Gunakan Komponen Pelanggan Sahaja

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

Kendalikan Pakej SSR Tidak Disokong

Untuk perpustakaan yang tidak menyokong SSR semasa import, pertimbangkan untuk menggunakan import dinamik atau pemuatan langsung:

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

Petua Tambahan

• Elakkan membalut komponen dalam jika anda tidak berniat untuk menghalang pemaparan.
• Import dinamik sesuai untuk perpustakaan yang digunakan kemudian dalam aplikasi.
• Rujuk dokumentasi rasmi Nuxt untuk panduan lanjut (https://nuxtjs. org/docs/2.x/features/nuxt-components/#the-client-only-component)

Atas ialah kandungan terperinci Mengapa Navigator, Tetingkap dan Dokumen Tidak Ditakrifkan dalam Aplikasi Nuxt?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!