Kaedah Nuxt untuk mengelak mengimport skrip pihak klien apabila dipaparkan pada bahagian pelayan

Question

Dalam aplikasi nuxt.js saya, saya mempunyai skrip yang mengimport pakej NPM yang hanya serasi dengan konteks penyemak imbas (ia merujuk document、location、window dll.)

Adakah terdapat cara untuk mengecualikannya daripada SSR?

import thing from "@vendor/thing"; // causes `document not defined` error
export default showThing(){
 if (process.client) {
    thing();
 }
}

Saya boleh menggunakan kaedah process.client tetapi fail masih diimport ke dalam komponen saya.

Answer 1

Anda boleh mengimportnya secara dinamik dan bukannya mengimportnya dalam setiap konteks.

Seperti yang dijelaskan dalam jawapan saya di sini: https://stackoverflow.com/a/67825061/8816585

Dalam contoh anda, ia akan kelihatan seperti ini

export default showThing(){
  if (process.client) {
    const thing = await import('@vendor/thing')
    thing()
  }
}