webpack を使用して AngularJS と Vue.js を 1 つのアプリケーションに構築しますか?

Question

これは少し複雑に思えるかもしれませんし、おそらく答えは「あれはやらないで、こうする」ということになるので、私がやっていることの背景から始めます。基本的に、Vue から Vue に移行したいレガシー AngularJS アプリケーションがあります。アプリケーションをエンドツーエンドで書き直すという選択肢はなかったので、完全に機能するアプリケーションを提供しながら、それを部分的に行う必要がありました。

したがって、全体的な目標は両方のフレームワークを同時に実行することです。ルーティングで何かできるか、単一ページのアプリを異なるフレームワーク用の 2 つの別々のページに分割できることを期待しています。これが Vue を実行するための論理的な最初のステップだと考えたので、angularjs を gulp ビルド パイプラインの使用から webpack の使用に切り替えましたが、障害にぶつかってしまいました。

Angular アプリケーションの構築に使用する webpack.config.js は次のようになります:

リーリー

これで正常に動作し、以前と同じように動作するエンディングを追加するものができました。

次に、/source/vueJs ディレクトリを追加し、vue create hello-world で生成された hello world プロジェクトの内容をコピーして貼り付けました。私の想定では、webpack.config.js を変更してビルドできれば、それをさらに反復して 2 つの動作するアプリをマージするところまで到達できると考えていますが、すでに試しているところです。 hello-world vue プロジェクトに何かを生成させるために。

これまでのところ、基本的にすべての関連する angularJS 部分をコメントアウトし、vue アプリを構築するために正しいと思われるものを追加しました。これで、次のようになります。

リーリー

これは正常に動作します。アセットを含む distribution/ ディレクトリが得られますが、提供されるサイトは JavaScript がまったく実行されていないかのように動作します。私のバージョンの npx webpack の出力と hello-world プロジェクトの npx vue-cli-service build の出力を比較すると、JavaScript は似ていますが、多くの点で異なります。最初は、私のバージョンには hello world プロジェクトのように HTML が埋め込まれていないように思えました。

webpack から vue アプリケーションをコンパイルしようとすると失敗しますか?これは vue-cli-service build を使用してのみ実行できるので、vue に限定されますか? https://cli.vuejs.org/guide/webpack.html と https://cli.vuejs.org/config/ にある情報を使用して vue.config.js を変更しようとしましたが、率直に言って、「私は今の自分の深さから外れており、自分がやっていることが良いアイデアかどうかわかりません。

最終目標を達成するためのより良い戦略はありますか?これが実行可能な解決策である場合、angularjs および vue アプリケーションを適切に構築するにはどのような構成変更を行う必要がありますか?

Answer 1

木を見て森を見ない。問題は、webpack.config.js が動作する Angular と Vue のコンボ アプリを正常に生成できないことではなく、 で使用される実際の テンプレートを提供していないことです。そのため、提供されたスクリプトを含む空の index.html が生成されるだけですが、本文にはコンテンツがありません。

＃＃＃変化＃＃＃ リーリー

私の質問では、AnularJS コンポーネントと Vue コンポーネントの両方を使用し、問題なく動作するテンプレートがありました。