"フロンティア：マイクロフロントエンドの火災の前半は混乱、ただ、現在のマイクロフロントエンドソリューションの技術的な選択を行うには、このようなアプリケーションのシナリオ上のビジネスニーズは、マイクロフロントエンドソリューションのうち、蟻の金サービス内部インキュベーションとして乾坤、オンラインアプリケーションが完全にテストされ、洗練された最後のオープンソースの後、最終的にクラウド製品のアーキテクチャの入り口として乾坤を選択します。しかし、ライン上の少ないドキュメントの展開に関する公式文書は、多くの子供たちの靴はまた、単にローカルで遊ぶかもしれない、本当にクローズドループ全体を歩いていないので、自分のものと組み合わせることで、乾坤着陸プロセスで遭遇した "それらのピット "コーミングを行います。私はあなたを助けることを願っています
"
お茶請け
"この記事は、qiankunの "過去の人生 "の導入の大部分ではありませんが、より多くの設計コンセプトは、ドキュメント参照してください あなたが子供の靴のための他のマイクロフロントエンドソリューションについて知りたい場合は、また、共有するために木のソースがマイクロフロントエンド確認することができます！
"
例：このようなシナリオがある、私はポータルポータルのログインインターフェイスを持って、ログイン結果は、次のように、別のサブアプリケーションに切り替えることができます2つのサブアプリケーションAとBがあり、互いに独立して展開され、別々にアクセスすることができますが、今、私は彼らにqiankunを使用したい "埋め込まれた "ロードするためにベースに、下を見て！ハンズオン
上記は、ドメイン名を介してサブアプリケーションにアクセスするための模式図であり、次のビューを見て、ヘッダヘッダとsideMenuの左メニューは、ポータルポータルに属し、領域の右側には、サブアプリケーションを切り替えるのビューを表示することですが、期待される効果：dev.portal.com/aのドメイン名にアクセスすると、左のメニューはまた、別のアプリケーションに応じて切り替わります。データ
iframeは臭わないのですか？いいえ、そんなことはありません。
- 親子間のコミュニケーションの問題
- cookie共有質問
- インタラクティブ・ビューがうまく動作しません
1.1 サブ・アプリケーションを登録する際の注意点は？
"ᑦ ああ明の学生：乾坤はどうやってサブアプリを登録したの？
"
registerMicroApps(apps, lifeCycles)qiankunは、APIを介してサブアプリケーションを登録することです、詳細なドキュメントは、感謝します。 参照してください ブラウザのURLが変更されたときに達成するために使用される、自動的に対応するサブアプリケーションの関数をロードし、上記の例と組み合わせることで、ベースのmain.jsでサブアプリケーションを登録しよう
- entry：サブアプリケーションのエントリーアドレス。例えば、2つのサブアプリケーションAとBがある場合、ここでのコンフィギュレーションは、それらのリソースアクセスドメイン名またはipです。
- render: 基本的にはコンテナ変換です。コンテナは、サブアプリケーションのコンテナノードのセレクタまたはElementインスタンスを定義するために使用されます。
- activeRuleは：サブアプリケーションのアクティブ化ルールは、つまり、どのようなルートアクセスは、ドメイン名またはipのエントリ構成をフェッチするgetActiveRuleで、一致を完了するには、getActiveRuleの実装を見て、パラメータとして現在の場所を渡すことによって、関数によると、ビューの値を返します。戻り値がtrueの場合、それは現在のサブアプリケーションがアクティブになることを示し、それはエントリの設定を呼び出します。
試合は以下の通り。
https://..com/a
https://..com/a/anything/everything
https://..com/c
マッチングに成功すると、qiankunはマッチしたサブアプリケーションの静的リソースをフェッチします。
1.2 ドメイン間のリソースアクセスはどのように解決されますか？
"ああダミーの学生：あなたはそうクロスドメインされません？ベースhttps://dev.portal.com/ サブアプリケーションのリソースを取得するhttps://dev.monitor.com/a的资源 、ブラウザの相同性ポリシーによると、明らかにクロスドメイン、それを得るべきではありません。
"
回答: はい、qiankunはサブアプリケーションの登録時に設定された静的リソースのURLを取得するため、すべての静的リソースはクロスドメインをサポートする必要があります。
Access-Control-Allow-Originサーバ側ではクロスドメインは許可されていません。Access-Control-Allow-Origin *すべてのリクエストソースを受け付けるようにするには、.Nginxの設定を.Access-Control-Allow-Headers: サポートされるContent-Typeの設定
1.3 サブアプリケーションの読み込み失敗の問題は？
"ああ、明: クロスドメインは解決されましたが、サブアプリケーションaの静的リソースをフェッチできません。何が問題ですか？
"
このエラーが発生しました：Application died in status LOADING_SOURCE_CODE: You need to export the functional lifecycles in xxx entry
答え：荷造りの位置が悪い
"vue-cli 3xプロジェクトでは、以下のようにvue.config.jsでoutputを設定する必要があります。
"
- pubilcPath: サブアプリケーションで動的にロードされるスクリプト、スタイル、イメージなどのアドレスが正しくない問題を解決します。
- output.library：サブアプリケーションを登録する際、メインアプリケーションの名前と同じで一意である必要があります。
output.libraryTarget:umdumd フォーマットのエクスポート、インポート、require、スクリプトの導入が可能です。
次にpublichPathファイルを作成し、main.jsに
1.4 サブアプリケーションのpublichPathは具体的にどのように設定すればよいですか?
"明生：packoutputの設定が変更されましたが、なぜpublichPathのパスが/aに設定されているのですか？
"
拡張：上記aアプリケーションのアクセスドメインdev.monitor.com/aの更新。
ブラウザはアプリケーションの静的リソースからcssファイルを正しく取得したいので、dev.monitor.com/a/css/common.cssにアクセスします。
主に2つのシナリオがあります：
- publichPathがデフォルトで設定されているか、/として設定されている場合、生成されたindex.htmlはアプリケーションのリソースではなく、dev.monitor.com/css/common.cssにアクセスするため、正しいリソースにアクセスしません。
- aとして設定され、生成されたindex.htmlは以下のようにリソースにアクセスします。
"ダミーの学生：そのpublichPathパスは./RelativePathは機能しますか？
"
回答：/aアクセスに設定するのと同じように可能です。
1.5 元のアプリケーションが問題なく動作し、ベースポータルに統合できることを保証する方法
"私のアプリケーションは別々にデプロイされているのですが、qiankunを経由してベースポータルに統合しても問題ないでしょうか？
"
答え：このグローバル変数を使用して、現在メインのqiankunアプリケーションで実行中かどうかを区別します。
window.__POWERED_BY_QIANKUN_That's: それは何に使えますか？下記をご覧ください。
window.__POWERED_BY_QIANKUN__Standalone: は false で、mount は vue オブジェクトを作成します。window.__POWERED_BY_QIANKUN__qiankunでの実行：trueの場合、マウントは実行されません。
1.6 親アプリが子アプリに利用とデータを共有する方法
"同級生の隣：ポータルログインアプリのログイン成功で得た個人データをサブアプリやいくつかの一般的な方法で共有したい場合、どうすればいいですか？
"
答え: サブアプリケーションを登録する際、共有したいメッセージを定義し、props を使って共有することができます。
- msg.data: 店舗状態管理データをサブアプリケーションに共有します。
- msg.prototype：プロトタイプのデータを定義します。
親アプリが定義された後、子アプリはそれをどのように取得するのでしょうか？子アプリにpropsデータをインポートし、子アプリがマウントされる前にそれをトラバースして子vueプロトタイプに割り当てます。
1.7 history routing mode, ngnix が正しくアクセスできるように設定するにはどうすればいいですか？
"兪兪兪：あなたがアクセスしたルーティングパターンはハッシュではなくヒストリーパターンでしたね。
"
回答：try_filesを追加するnginxの構成は、履歴モードでも問題が発生します、ページが更新されたときに、適切な設定がない場合は、404エラーが発生します、このために参照してください、あなたはnginxで追加の構成が必要です、urlが見つからない場合は、ホームページのhtmlをバック！
try_files: nginxがクライアントクライアントが必要とするリソースを見つけられないときに404にアクセスする問題を解決するために使用されます。
proxy_pass：主にインターフェイスのゲートウェイリバースプロキシを設定するために使用されます。
ngnixの設定についてもっと知りたい方は、Tree Jamが書いたngnixご覧ください！
おすすめ：マイクロフロントエンドを学びたての子供たちへ
子供の靴のマイクロフロントエンドを学ぶための最初の時間は、ピーターのchunchaoマイクロフロントエンドフレームワークを学ぶことができ、それは github開始するために理解することが容易になります
過去の記事を参照してください：
一杯おごります 三文芝居を思い出してください！
1.読み終わったら、を褒めることを忘れずに Oh, havehave power！
3.記事がGithub frontendThingsで 紹介されました！
