みなさん、こんにちは。私は起業家歴 10 年のベテランであり、オープンソース テクノロジーの愛好家である Liu Ming です。
実稼働環境でソフトウェアの依存関係を最新バージョンにアップグレードするときは注意が必要であることは誰もが知っていますが、問題が発生しやすく、トラブルシューティングが簡単ではありません。
しかし、オープンソース愛好家として、私は常に非実稼働環境で最新バージョンを研究することを好みます。
2023 年 5 月 16 日、Nuxt 開発チームは Nuxt 3.5.0 バージョンをリリースしました。以前開発中のプロジェクトをアップグレードしたのですが、白い画面が表示されました。
問題の原因と解決プロセスを記録し、同じ状況に遭遇した子供靴があれば参考にしてください。
問題の背景
現在、Nuxt3 をベースとしたバックグラウンド管理システム (仮称 Nuxt-Pro) を開発していますが、Nuxt Pro は進化を続けており、本番環境では使用されていません。そこで、Nuxt 3.5.0がリリースされるとすぐに、次のコマンドでアップグレードしました。
npx nuxi upgrade
アップグレードが完了したら、次のコマンドを実行してプレビューします。
npm run dev
プレビュー コマンドの実行中にパッケージ化エラーは発生しませんでしたが、ブラウザーを開くとlocalhost:3000、残念ながらアプリの画面が真っ白になってしまいます。
問題の原因
アップグレード前、Nuxt Pro の依存関係は Nuxt 3.4 と Vue3.2 でした。
アップグレード後、Chrome の開発者ツールを開き、Consoleタブに切り替えると、本当にエラーが報告されます。エラーは、hasInjectionContext这vue に API がないということです。Vue
hasInjectionContext3.3 の新しい API です。フォルダー内に vue を見つけました
。ファイルnode_modulesを確認したところ、まだバージョン 3.2 でした。エラーの原因: Vue のバージョンがアップグレードされていません。package.json
問題の解決策
方法 1
再度アップグレードするには、次のコマンドを実行します。
npx nuxi upgrade --force
パラメータを追加した後--force、Vue のバージョンもアップグレードされ、問題は完全に解決されました。
方法 2
すべての依存関係を再インストールします。まずnode_modulesフォルダーを削除してから、次のコマンドを実行します。
npm install
すべての依存関係を再インストールした後、Vue はバージョン 3.3 を自動的にインストールし、問題は解決されました。
子供用の靴で同様の問題が発生した場合は、上記の解決策を参照してください。解決できない他の問題が発生した場合は、私にプライベート メッセージを送ってください。皆さんにバグがないことを祈ります!