今日はかなりの時間をかけて Vue のマルチページについて研究しました。一般的に使えると感じたので、自分自身も将来的に再利用する可能性があるため、少し整理して GitHub にアップロードしました:vue-multi-pages
背景と現状について話しましょう。
Vue は元々シングルページ向けに設計されており、vue cli で生成されるプロジェクトもシングルページです。シングルページの前提では、多くの設定がデフォルト化されており、開発者は気づかないでしょう。しかし、マルチページに変換すると、開発者が知らなくてもよかった設定が多く現れ、それらを知って修正する必要があります。
さらに、公式のガイドもあまりなく、ネット上にはさまざまな新旧バージョンが混在しているため、学ぶのは疲れるし、どれが最善の方法かも判断しにくいです。Vue のソースコードをもっと読むことができれば、判断が容易になるかもしれませんが、ほとんどの人にはその忍耐と時間がありません。
技術的には、大まかに 2 つの実装方法があります:pages と router を使用する方法です。後者は本質的にはシングルページであり、router を使用してマルチページのように見せているだけであり、より徹底的なのは pages の方法です。
詳しくは説明しませんが、詳しい人はコードを見ればすべてわかるでしょう。ここではいくつかのポイントを簡単に挙げます:
- 多階層のディレクトリをサポート
- router、vuex の例を含む
- グローバルな 404 の実装が組み込まれています
- コードにはまだプライベートおよびパブリックコンポーネントの例は含まれていませんが、簡単に実装できるはずです
- vue-multiple-pages を参考にし、それをベースに二次開発しました
話は変わりますが、Vue 3 ではマルチページのサポートがより良くなるのかどうかはわかりませんが、期待しています。
ブログの原文:0226 - 自分がいじくった Vue のマルチページフレームワークをオープンソース化しました