Nuxt アプリでナビゲーター、ウィンドウ、ドキュメントが定義されていないのはなぜですか?

Nuxt のナビゲーター/ウィンドウ/ドキュメントでの未定義エラーに対処する方法

Nuxt アプリケーション内でユーザー エージェントまたは Retina 情報を取得しようとしたとき、ナビゲーター、ウィンドウ、またはドキュメントが未定義であることを示すエラーが発生する場合があります。これは、サーバー側レンダリング (SSR) 中に JavaScript コードが実行され、ウィンドウやナビゲーターなどのブラウザー固有のオブジェクトにアクセスできないために発生します。

解決策

この問題を解決するには、ロジック JS コードを次の構造内でラップします:

<script>
  import { jsPlumb } from 'jsplumb'

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

これにより、コードはこれらのオブジェクトが利用可能なクライアント側でのみ実行されるようになります。さらに、<client-only> の使用を検討してください。

<template>
  <div>
    <p>Rendered on both: server + client</p>
    
    <client-only>
      <p>Rendered only on client</p>
    </client-only>
  </div>
</template>

追加のヒント

• SSR のサポートについては、ライブラリのドキュメントを確認してください。サポートされていない場合は、動的インポートまたは直接インポートを使用してください。

• 例:

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

  これらの手法を使用すると、Nuxt アプリケーション内のナビゲーター、ウィンドウ、ドキュメント オブジェクトにアクセスでき、発生した未定義のエラーを解決します。

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