Mengapa Navigator, Tetingkap dan Dokumen Tidak Ditakrifkan dalam Apl Nuxt Saya?

Cara Menangani Ralat yang tidak ditentukan pada Navigator/Tetingkap/Dokumen dalam Nuxt

Apabila cuba mendapatkan semula maklumat ejen pengguna atau retina dalam aplikasi Nuxt , ralat mungkin timbul yang menunjukkan bahawa pelayar, tetingkap atau dokumen tidak ditentukan. Ini berlaku disebabkan oleh kod JavaScript yang dilaksanakan semasa pemaparan sisi pelayan (SSR), yang tidak mempunyai akses kepada objek khusus penyemak imbas seperti tetingkap atau pelayar.

Penyelesaian

Kepada selesaikan isu ini, bungkus kod JS logik anda dalam binaan berikut:

<script>
  import { jsPlumb } from 'jsplumb'

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

Ini memastikan bahawa anda kod hanya dilaksanakan pada bahagian klien, di mana objek ini tersedia. Selain itu, pertimbangkan untuk menggunakan komponen untuk memaparkan bahagian tertentu semata-mata pada klien.

<template>
  <div>
    <p>Rendered on both: server + client</p>
    
    <client-only>
      <p>Rendered only on client</p>
    </client-only>
  </div>
</template>

Petua Tambahan

• Semak dokumentasi perpustakaan untuk sokongan SSR. Jika tidak disokong, gunakan import dinamik atau import langsung.

• Contohnya:

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

  Dengan menggunakan teknik ini, anda boleh mengakses objek navigator, tetingkap dan dokumen dalam aplikasi Nuxt dan selesaikan ralat tidak jelas yang dihadapi.

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