Mengapakah `navigator`, `window` dan `document` tidak ditentukan dalam aplikasi Nuxt saya?

Cara Menangani Navigator / tetingkap / dokumen yang tidak ditentukan dalam Aplikasi Nuxt

Pengenalan

Dalam Aplikasi Nuxt, mengakses pembolehubah penyemak imbas global seperti navigator, tetingkap dan dokumen kadangkala boleh mengakibatkan ralat yang tidak ditentukan. Ini kerana rangka kerja Nuxt menggunakan pemaparan sisi pelayan (SSR), di mana kod pada mulanya dilaksanakan pada pelayan sebelum diberikan pada klien.

Penyelesaian

The kunci untuk menyelesaikan isu ini adalah untuk mengehadkan kod yang bergantung kepada penyemak imbas kepada bahagian klien. Untuk mencapai matlamat ini, terdapat beberapa strategi:

1. Balutan Kod Bersyarat

Balut kod anda dalam keadaan if (process.client) untuk melaksanakannya hanya pada bahagian klien. Ini memastikan bahawa kod hanya dijalankan selepas fasa SSR.

<script>
  export default {
    mounted() {
      if (process.client) {
        // Your JS code here
      }
    },
  }
</script>

2. Komponen

Buat komponen untuk membungkus elemen yang harus diberikan hanya pada klien. Ini menghalang mereka daripada dilaksanakan semasa SSR.

<template>
  <div>
    <client-only>
      <p>This will only be rendered on client</p>
    </client-only>
  </div>
</template>

3. Import Dinamik

Jika perpustakaan tidak menyokong SSR, anda boleh menggunakan import dinamik. Ini melengahkan pemuatan pustaka sehingga ia diperlukan pada bahagian pelanggan, memastikan ia tidak dilaksanakan semasa SSR.

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

Nota:

• Pembungkusan komponen anda dalam melangkau pemaparan, bukan pelaksanaan.
• Sesetengah pakej mungkin memerlukan konfigurasi tambahan untuk berfungsi dengan betul dengan SSR.

Atas ialah kandungan terperinci Mengapakah `navigator`, `window` dan `document` tidak ditentukan dalam aplikasi Nuxt saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!