Nuxt-Methode, um den Import clientseitiger Skripte beim Rendern auf der Serverseite zu vermeiden

Question

In meiner nuxt.js-Anwendung habe ich ein Skript, das NPM-Pakete importiert, die nur mit dem Browserkontext kompatibel sind (es verweist auf document、location、window usw.)

Gibt es eine Möglichkeit, es von SSR auszuschließen?

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

Ich kann die process.client-Methode verwenden, aber die Datei wird trotzdem in meine Komponente importiert.

Answer 1

您可以动态导入它，而不是在每个上下文中导入它。

正如我在这里的回答所解释的：https://stackoverflow.com/a/67825061/8816585

在你的例子中，会是这样的

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