Bagaimana untuk Mengakses `navigator`, `window` dan `document` dalam Aplikasi Nuxt?

Berurusan dengan Navigator, Tetingkap dan Dokumen yang Tidak Ditakrifkan dalam Aplikasi Nuxt

Apabila cuba mendapatkan maklumat seperti UserAgent dan status Retina dalam Nuxt aplikasi, anda mungkin menghadapi ralat yang berkaitan dengan navigator, tetingkap atau objek dokumen yang tidak ditentukan. Ini disebabkan oleh sifat Nuxt sebagai rangka kerja pemaparan sebelah pelayan.

Penyelesaian:

Untuk menyelesaikan isu ini dan mengakses objek ini dalam Nuxt, anda boleh menggunakan satu atau lebih daripada pendekatan berikut:

Pembungkus JavaScript:

Balut kod anda menggunakan struktur berikut:

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

Pelanggan -Komponen Sahaja:

Jika komponen tertentu hanya perlu dipaparkan pada bahagian pelanggan, pertimbangkan untuk membungkusnya dalam tag:

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

Import Dinamik untuk Pakej Tidak Disokong:

Untuk pakej yang tidak menyokong pemaparan sebelah pelayan, gunakan import dinamik dalam definisi komponen anda:

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

Dengan melaksanakan penyelesaian ini, anda boleh mengakses navigator, tetingkap dan objek dokumen dengan berkesan dalam aplikasi Nuxt anda, memastikan ciri ini tersedia untuk digunakan pada bahagian klien.

Atas ialah kandungan terperinci Bagaimana untuk Mengakses `navigator`, `window` dan `document` dalam Aplikasi Nuxt?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!