避免在伺服器端渲染時匯入客戶端腳本的Nuxt方法

Question

在我的nuxt.js 應用程式中，我有一個腳本導入僅與瀏覽器上下文相容的NPM 套件（它引用document、location、window 等）

有沒有辦法將其從 SSR 中排除？

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

我可以使用 process.client 的方法，但該檔案仍然匯入到我的元件中。

Answer 1

您可以動態匯入它，而不是在每個上下文中匯入它。

正如我在這裡的答案所解釋的：https://stackoverflow.com/a/67825061/8816585

#在你的例子中，會是這樣的

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