はじめに
このプロジェクトでは、vue-router 3.1.3 ライブラリにおける警告問題を修正する方法を学びます。vue-router は Vue.js アプリケーション用の人気のあるルーティングライブラリであり、3.1.3 バージョンには、pathMatch パラメータが空の値の場合に警告を生成するバグがありました。手順を追っていくことで、問題を特定し、コードを修正し、警告を解消するためにライブラリを再構築することができます。
🎯 タスク
このプロジェクトでは、以下を学びます。
- vue-router 3.1.3 ライブラリの
params.jsファイルにおける問題を特定する方法 - 警告を削除するためのコードを修正する方法
- 修正を加えた vue-router 3.1.3 ライブラリを再構築する方法
- 修正版をテストして警告が表示されなくなったことを確認する方法
🏆 成果
このプロジェクトを完了すると、以下のことができるようになります。
- サードパーティのライブラリにおけるトラブルシューティングと問題の修正
- 依存関係を最新状態に保ち、既知のバグを修正する重要性を理解する
- コード変更後のライブラリの再構築プロセスを示す
- ライブラリの機能をテストして、期待通りに機能することを確認する
Vue-Router 3.1.3 の警告を修正する
始める前に、左側のファイルのディレクトリ構造を以下のように見てください。
├── vue-router-3.1.3
├── vue.js
└── index.html
WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。
次に、VM の上部にある「Web 8080」を開き、手動で更新して、「/nope/」をクリックし、次に「test」をクリックして、ブラウザのコンソールで「Console」オプションを開きます。次のメッセージが表示されます。
[vue-router] missing param for named route "NotFound": Expected "0" to be defined
このステップでは、vue-router 3.1.3 のコードにおける pathMatch 問題によって生成される警告を修正する方法を学びます。
vue-router-3.1.3/src/util/params.jsファイルを開きます。- 警告の原因となっている 28 行目のコードを見つけます。
if (process.env.NODE_ENV !== "production") {
warn(false, `missing param for ${routeMsg}: ${e.message}`);
}
- 警告を削除するために
warn関数の呼び出しをコメントアウトします。
if (process.env.NODE_ENV !== "production") {
// warn(false, `missing param for ${routeMsg}: ${e.message}`)
}
これにより、コンソールに警告が表示されなくなります。
Vue-Router 3.1.3 プロジェクトを再構築してテストする
このステップでは、警告を修正した後の vue-router 3.1.3 プロジェクトを再構築してテストします。
- ターミナルを開き、
vue-router-3.1.3ディレクトリに移動します。 - 依存関係をインストールするために
npm installコマンドを実行します。このプロセスには時間がかかる場合があるので、しばらくお待ちください。（長時間止まった場合は、Ctrl+Cを押してプロセスを終了してから、再度このコマンドを実行してください。） - すべての依存関係が正常にインストールされた後、警告修正済みの vue-router 3.1.3 ライブラリの新しいビルドを生成するために、
npm run buildコマンドを実行してプロジェクトを再構築およびリリースします。 - ブラウザで
Web 8080ページを開きます。 - 「/nope/」リンクをクリックし、次に「test」リンクをクリックします。
- ブラウザのコンソールを開き、警告メッセージが表示されなくなっていることを確認します。
おめでとうございます！vue-router 3.1.3 ライブラリの警告問題を正常に修正しました。
まとめ
おめでとうございます！このプロジェクトを完了しました。あなたのスキルを向上させるために、LabEx でさらに多くの実験を行って練習してください。
