Mengapa saya mendapat ralat "navigator / window / document is undefined" dalam aplikasi Nuxt saya?

Menavigasi Ralat Tidak Ditakrifkan dalam Nuxt: Menyelesaikan "navigator / window / document is undefined"

Dalam aplikasi Nuxt, pembangun sering menghadapi masalah apabila mencuba untuk mengakses pembolehubah global tertentu seperti "navigator," "window" atau "document." Ini boleh berlaku apabila melaksanakan kod JavaScript yang bergantung pada pembolehubah ini.

Untuk menyelesaikan isu ini, adalah penting untuk memahami bahawa aplikasi Nuxt menggunakan Perenderan Sisi Pelayan (SSR), yang menjana HTML pada pelayan sebelum menghantarnya ke pelanggan. Pembolehubah global tidak tersedia semasa SSR kerana ia hanya tersedia dalam persekitaran penyemak imbas.

Untuk mengakses pembolehubah global ini dalam Nuxt, anda perlu menggunakan pendekatan pihak klien sahaja:

Balut Logik Sisi Pelanggan dalam "jika (proses.pelanggan) { ... }":

Balut kod JS anda dalam keadaan "jika (proses.pelanggan)". Ini akan memastikan bahawa kod hanya dilaksanakan pada bahagian klien, di mana pembolehubah global ini tersedia:

export default {
  mounted() {
    if (process.client) {
      console.log(navigator.userAgent);
    }
  },
};

Gunakan "":

Balut komponen yang sepatutnya hanya dipaparkan pada bahagian klien dengan "":

<template>
  <div>
    <p>This will be rendered on both server and client.</p>
    
    <client-only>
      <p>This will only be rendered on client.</p>
    </client-only>
  </div>
</template>

Import Perpustakaan Secara Dinamik untuk SSR:

Beberapa perpustakaan mungkin tidak menyokong SSR. Untuk menggunakannya, import secara bersyarat menggunakan import dinamik:

export default {
  components: {
    [process.client && 'MyComponent']: () => import('./MyComponent.vue'),
  }
};

Import Terus:

Untuk komponen yang hanya dimaksudkan untuk digunakan pada bahagian klien, anda boleh mengimportnya terus seperti ini:

export default {
  components: {
    'MyComponent': () => import('./MyComponent.vue'),
  }
};

Dengan mengikut pendekatan ini, pembangun boleh berjaya mengakses dan memanipulasi pembolehubah global seperti "navigator," "window" dan "document" dalam aplikasi Nuxt mereka.

Atas ialah kandungan terperinci Mengapa saya mendapat ralat "navigator / window / document is undefined" dalam aplikasi Nuxt saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!