vueのバージョンに応じてプロジェクトを区別する方法については記事で詳しく説明しています

バージョンに応じて区別するにはどうすればよいですか?以下の記事では、プロジェクト内の vue のバージョンに応じた差別化方法を紹介しますので、ご参考になれば幸いです。

最近、プロジェクトの初期化とビルド中に、コンソール エラーの問題が発生しました。lib_exports.getCurrentInstance は関数ではありません。この問題のトラブルシューティングを行っています。その過程でいくつかの知識を学びました: vue には、2.6.x、2.7、3.x など、多くのバージョンがあります。異なる vue バージョンには使用方法があります。異なるプロジェクトに公開ツールを提供する必要があると仮定すると、異なるプロジェクトの Vue バージョンに応じてツールをどのように区別できるでしょうか?まず実装方法を考えてから、質問を念頭に置きながら読み進めてください。 [関連する推奨事項: vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]

初期トラブルシューティング

エラー スクリーンショットからわかるように、直接の原因は、vueuse## の useVModel メソッドで getCurrentInstance メソッドを呼び出すことによって発生するコンソール エラーです。 ＃。 vueuse のソース コードから、vueuse が vue-demi から getCurrentInstance メソッドをインポートしていることがわかります。

次に、以下に示す

vue-demi のソース コードを確認すると、何か間違っていることがわかりました。このプロジェクトで使用する vue のバージョンは vue2 です。なぜ isVue なのかというと、コード内の = true ? ?さらに、getCurrentInstance は vue2.7 と vue3 にのみ組み込まれています。vue2.7 より前では、getCurrentInstance は @vue/composition-api を通じてのみ使用できます。 。

#vue-demi 原則

##vue-demi

は同時サポート A vue2.x および vue3.x 用のツールを作成するためのツール ライブラリ。Vueuse はこのライブラリを使用して、vue2.6.x、vue2.7、および vue3.x 間のいくつかの違いを滑らかにします。 vue-demi

の

package.json の scripts セクションを確認すると、postinstall で構成されていることがわかります。 npm scriptフック、postinstallフックは、pnpm install コマンドを実行した後に実行されます。

node_modules/vue-demi/scripts/postinstall.js が何をするのか見てみましょう。最初に vue (

require(' vue')

)。 vite または webpack で { find: /^vue$/, replace: '@xf/vue' }, などの vue エイリアスを設定した場合、その設定はスクリプトはここにあります。はい、スクリプトは依存関係がインストールされた直後に実行されるためです。この時点ではプロジェクトは開始されておらず、Vite とは何の関係もありません。 vue をロードしようとすると、条件を判断して switchVersion メソッドを実行します。

switchVersion メソッドの主な動作は、渡されたバージョン番号パラメータに基づいてさまざまな構成コンテンツをコピーし、ターゲット ファイル内で置き換えることです。

vue2.5 または vue2.6 の場合、次のソース コード コンテンツをコピーします:

vue3 の場合は、次のソース コード コンテンツをコピーします。

vue-demiさまざまな vue バージョンに差別化された処理を実装する原則は、次のとおりです。こちらです。

根本原因と解決策

プロジェクトのコンソール エラーの問題に戻ります。これは、vue-demi がプロジェクトの vue を認識できないためです。これは、vue ソース コードが変更された後のインストールされたプロジェクトが

@xf/vue

であり、pnpm add vue が存在しないためです。認識されない場合、vue-demi はデフォルト設定を使用します (デフォルト設定は vue3 設定です)。 コードの実行時に使用する vue は vue2.5.X です。import { getCurrentInstance } from 'vue' を試行すると、必ずエラーが発生します。

解決策は、vue-demi が vue バージョン構成を手動で切り替えるコマンドを提供することです。プロジェクトの準備 npm スクリプトを構成します: npx vue-demi-switch 2,その後、プロジェクトの依存関係をインストールし、vue2 構成に手動で切り替えるたびに実行されます。

(学習ビデオ共有: vuejs 入門チュートリアル 、基本プログラミング ビデオ )

以上がvueのバージョンに応じてプロジェクトを区別する方法については記事で詳しく説明していますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。