「Nuxt - 「yarn generated」の実行後にページが正しく読み込まれません。」

Question

次のディレクトリ構造の下にページがある単純な nuxt アプリケーションがあります。

ページ
   折り返し電話
       Index.vue

このアプリケーションは「ユニバーサル」モードを使用して構築されました。私の問題は、アプリケーションをローカル（つまり、yarn dev）で実行すると、コールバックページが完全に表示され、正常に動作することです。ただし、yarn generated を実行して dist フォルダーを提供すると、ページに若干の視覚的エラーが発生します。コンソール エラーやネットワーク エラーはありませんが、表示に多少むらがあります。問題は、特定のアイコン (ハンバーガー メニュー) が読み込まれず、ドロップダウン/選択コンポーネントが適切に初期化されず、クリックされるまでそのプレースホルダーが表示されないことです。

これらのコンポーネントは構築されており、アプリケーション内の他の場所では正常に動作しますが、生成されたページでは動作しません。

ビルド出力で devtools を有効にしていますが、ローカルで実行されているバージョンと生成されたバージョンで確認できる唯一の違いは、コールバック ルートに移動すると、生成された出力が vue devtools を受け取っていないようであることです。の「アクティブ」フラグ。

これはおかしいと思い、ナビゲート可能なリンクと非表示のページについて読んで (このページは現在サイトのどこからもリンクされていないため)、多くのことを試しましたが、何もうまくいきませんでした。私がやってきた最も近い方法は、コールバック ルートにリンクする NuxtLink 要素をホームページに作成することです。これを行うと、リンクをクリックした後、ページは期待どおりに動作し、devtools のルーティング タブにアクティブ フラグが設定されます。しかし、URL バーを介してそれに移動すると、機能しません。

nuxt と vue ルーターのドキュメントを詳しく読みましたが、問題の解決策が見つからないようです。

Answer 1

yarn generated は、ターゲットがユニバーサルに設定されているときに静的サイトをデプロイするために使用されます。 yarn build と yarn start を実行して、ユニバーサル モードでデプロイします。

こちらのドキュメントを参照してください。