Nuxt アプリケーションでナビゲーター、ウィンドウ、ドキュメントが未定義なのはなぜですか?

Nuxt アプリケーションで未定義のナビゲーター、ウィンドウ、ドキュメントを解決する方法

はじめに

開発者は、Nuxt アプリケーション内でナビゲーター、ウィンドウ、ドキュメントが未定義のままであるというエラーに遭遇することがよくあります。この問題は、UserAgent や Retina 情報などのブラウザ関連の情報にアクセスしようとすると発生します。

解決策

この問題を解決するには、JavaScript コードを特定の構造内でラップして、クライアント側のみで適切に実行されるようにします。

Mounted() フックと process.client でコードをラップする

<script>
import { jsPlumb } from 'jsplumb'; // client-side library only, no SSR support

export default {
  mounted() {
    if (process.client) {
      // your JS code here like >> jsPlumb.ready(function () {})
    }
  },
}
</script>

クライアント専用コンポーネントを使用する

<template>
  <div>
    <p>this will be rendered on both: server + client</p>
    
    <client-only>
      <p>this one will only be rendered on client</p>
    </client-only>
  </div>
</template>

サポートされていない SSR パッケージの処理

インポート時に SSR をサポートしないライブラリの場合は、動的インポートまたは直接読み込みの使用を検討してください。

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

追加のヒント

• 内でコンポーネントをラップすることは避けてください。レンダリングを妨げるつもりがない場合。
• 動的インポートは、アプリケーションの後半で使用されるライブラリに適しています。
• 詳細なガイダンスについては、Nuxt の公式ドキュメントを参照してください (https://nuxtjs. org/docs/2.x/features/nuxt-components/#the-client-only-component)

以上がNuxt アプリケーションでナビゲーター、ウィンドウ、ドキュメントが未定義なのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。