為什麼我的 Nuxt 應用程式中未定義「navigator」、「window」和「document」？-js教程-PHP中文網

為什麼我的 Nuxt 應用程式中未定義「navigator」、「window」和「document」？

Susan Sarandon

發布： 2024-11-10 22:46:02

原創

1009 人瀏覽過

Why are `navigator`, `window`, and `document` undefined in my Nuxt application?

如何解決Nuxt 應用程式中未定義的導航器/視窗/文件

簡介

中Nuxt 應用程序，存取全域瀏覽器變數（如導航器、視窗和文件）有時會導致未定義的錯誤。這是因為 Nuxt 框架使用伺服器端渲染 (SSR)，其中程式碼最初在伺服器上執行，然後在客戶端上渲染。

解決方案

解決這個問題的關鍵是將依賴瀏覽器的程式碼限制在客戶端。為了實現這一目標，有幾種策略：

1。條件代碼包裝

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

登入後複製

將程式碼包裝在 if (process.client) 條件中，以便僅在客戶端執行。這可確保程式碼僅在 SSR 階段之後執行。

2. 元件

<template>
  <div>
    <client-only>
      <p>This will only be rendered on client</p>
    </client-only>
  </div>
</template>

登入後複製

建立一個元件來包裝僅應在客戶端呈現的元素。這可以防止它們在 SSR 期間執行。

3.動態匯入

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

登入後複製

如果函式庫不支援SSR，您可以使用動態匯入。這會延遲庫加載，直到客戶端需要它為止，確保它不會在 SSR 期間執行。

換行您的元件位於跳過渲染，而不是執行。某些軟體包可能需要額外的配置才能與 SSR 正常運作。

以上是為什麼我的 Nuxt 應用程式中未定義「navigator」、「window」和「document」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！