4

問題が発生しました。以下はシナリオです。

4〜5つの画面/コンポーネント（ユーザーの管理、通知の管理、ロールの管理など）を持つvueアプリケーション（my-adminマイクロアプリ）を開発し、次のように書いたrouter.jsを作成しました：

...imports... 
Vue.use(VueRouter);
// }
const routes = [
  {
    path: '/',
    name: 'main-layout',
    component: MainLayout,
    children:[
      {
        path : 'manage-user',
        name : 'manage-user',
        component : ManageUserComponent
      },
      {
        path : 'manage-role',
        name : 'manage-role',
        component : ManageRoleComponent
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

以下のように、このルーターオブジェクトをmain.jsにインポートしました。

...imports...
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

そして最後に、このマイクロアプリを main.js の Web コンポーネント (MainLayout コンポーネント)として以下のようにラップします。

const myAdmin = wrap(Vue,MainLayout)

window.customElements.define('my-admin', myAdmin)

次のコマンドでこのマイクロアプリをビルドします。

"build": "vue-cli-service build --target wc --name my-admin ./src/main.js",

このマイクロアプリは以上です。このマイクロアプリを個別に実行すると、完全に実行されます。

しかし、私のシナリオでは、Vueのみで開発されたシェル アプリケーション (my-shell) があります。このシェル アプリケーションには独自の vue ルーターもあり、以下のように main.js にインポートされます。

. シェル ルータ:

...imports... 

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'container',
    component: Container,
    children:[
      {
        path : 'admin',
        name : 'admin-microapp',
        component : AdminMicroAppContainerComponent
      },
      {
        path : 'other',
        name : 'other-microapp',
        component : OtherMicroAppContainerComponent
      }
    ]
 }
]

const router = new VueRouter({
  routes
})

export default router

そして、このルーターオブジェクトを以下のように my-shell の main.js にインポートしました:

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

そして、my-shell の index.html 内にタグ(内) を追加して、以下のようにマイクロ アプリのビルド (my-admin.js ファイル) をロードしました。

 <script src="../assets/my-admin/dist/my-admin.js"></script>
 <script src="../assets/other-microapps/dist/micro-app.js"></script>

しかし、私が my-shell application を開始しているとき。それは以下のエラーをスローしています:

Uncaught TypeError: Cannot redefine property: $router.

このエラーを取り除くにはどうすればよいですか?

4

1 に答える 1

3

このシナリオを再現しようとしたことはありませんが、うまくいかない明確な理由を見つけることができます。

SPA を起動すると何が起こるかを簡単に見てみましょう。 ここに画像の説明を入力

ルーターは最初に初期化されnew Vue()ます.新しいものは拒否されます。

私のアドバイス:

サブアプリ (Web コンポーネント) で vue-router を使用しないでください。軽量のコードを使用してルーティングを処理してください。

マイクロ フロントエンド アーキテクチャを行った私の経験では、全体的な目標は、可能な限り SOLID パターンに固執することです。サブアプリがルーティングに vue-router を必要とするほど複雑な場合、それは正しくありません*。

通常、サブアプリは 1 つのことだけを実行する必要があります。

たとえば、ビジネス SaaS ソフトウェアでは、顧客のマイクロアプリは、

  1. 新しい顧客の作成 (ポップアップ モーダル)
  2. 顧客のリスト
  3. 1 人の顧客の取引レポートを表示する
  4. お客様情報の編集（ポップアップモーダル）

顧客の支払い、負債、複雑なチャート作成レポートの処理は、それぞれ別のサブアプリによって処理されます。

ルーティングが必要なのは 2 と 3 のみで、これはv-ifステートメントで処理しました。

于 2020-02-02T10:52:57.473 に答える