やりたいこと Vue.jsで個人開発しているSPAアプリケーションにLP(ランディングページ)を埋め込むことがありました。 実現したいこととしては、 静的にHTMLを読み込んでほしい(SEO的に、jsなしでも動くことが条件) 同じドメイン下に置きたい できればVueだけで解决したい(LPのためだけにNuxtやGridsomeで書き直すようなことはしたくない) 調べてみた 最初にたどり着いた方法が、 リバースプロキシ を使ってURLでレスポンスを変える方法でしたが、Vue単体で解決できてないのでとりあえず保留。 色々情報を漁っていると… Vue.jsには MPA を構築する機能が標準で搭載されているらしい…？ MPAとは (知っている方は読み飛ばしてください) VueやReactなど、モダンなフロントエンドフレームでは SPA (シングルページアプリケーション)として開発するのが主流です。つ
概要 エントリーポイントを分けることで、コードの見通しは良くなり、余分なコードのダウンロードを避けることができます。 今回、vue-cli 3.0 で立ち上げた趣味アプリに複数のエントリーポイントを用意したのですが、 思いの外苦戦したので設定方法を共有したいと思います。 設定方法 vue-cli の2系までは webpack.config に entry を記述することで、複数のエントリーポイントに対応する事ができました。1 しかし、vue-cli 3.0でセットアップしたプロジェクトには webpack.config が生成されません。 その代わりに vue.config.jsに vue-cli の設定を記述することができます。2 この中で pages オブジェクトとして、複数のエントリーポイントを定義することができます。 この状態を multi-page mode と呼びます。 vue
SPA(シングルページアプリケーション)での使用例や記事は多く見られますが、MPA(マルチページアプリケーション)での利用例・情報は公式含めあまり多く見られませんので記録しておきます。 目的 そもそも、主流のSPAではなくMPAでVueプロジェクトを構成しようと思った理由は下記になります。(Vue.jsは学習中なので間違っている可能性もあり) Django REST frameworkとの連携を考えた際に、ルーティングをDjango側で制御することでSPAにおけるSEO対策を考えなくてよい。 プロジェクトのディレクトリを各ページごとに分けることで開発中の見通しがよくなるのではと考えた。 参考 以下の記事を参考にしました。 vue-cli 3.0で立ち上げたアプリに複数のエントリーポイントを用意する multiple pages in Vue.js CLI 事前知識 Vue CLI 3からは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く