ダウンロード実行

デオムのダウンロード

公式デモは GitHub にあります (アクセスに問題があり、セットアップが必要ですが、私はセットアップしていません)

リンク: https://github.com/Tencent/wjie (他の場所にあるため、使用することもできます)

pnpmダウンロード

その中のパッケージは pnpm 経由でダウンロードする必要がありますが、npm を使用してダウンロードすると問題が発生します。！！

npm install pnpm -g

注: pnpm の最新バージョンはデフォルトでダウンロードされ、サポートされるノードは 14.6 以降です。以下のバージョンについては、pnpm の公式 Web サイトにアクセスして過去のバージョンを見つけてください。

走る

npm run start

次のインターフェイスが表示されます。これは成功を意味します。

個人プロジェクトに参加する

プロジェクトを作成する

例で独自のプロジェクトを作成します (私は vue2 を使用しているので、vue2 プロジェクトを作成するなど)

注: メインページプロジェクトは、すべてのプロジェクトが最終的に実行される場所であり、メインページプロジェクトと同等です。

個人プロジェクト - ルーティングの構成

初期プロジェクト (実験的)

後で表示して使用するのに便利なルーティングを構成します。個人プロジェクトに vue スキャフォールディングがある場合は、簡単な方法でルーティングを生成することをお勧めします。

vue add router

router.js ファイルと 2 つのパステンプレートが自動的に生成されます

プロジェクトを完了する

ルートメインファイルに次のように設定する必要があります

export default new Router({
    mode: 'history',
    base: process.env.NODE_ENV === 'production' ? '/{项目名称}/' : '',
    routes: [{
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import( /* webpackChunkName: "about" */ './views/About.vue')
        }
    ]
})

関連付けを開始する

main-vue で、個人プロジェクトを unbounded に関連付け始め、router.js ファイルで次の操作を実行します。

まずページをインポートします

import VueTest from "../views/Vuetest.vue";

次に、ルーティングパスを設定します。name属性の値が前と同じであることに注意してください。

{
        path: "/vuetest",
        name: "vue_test",
        component: VueTest,
 },

以下に示すように

次に、インポートしたページをビューファイルに追加します

以下に示すように

コード：

<template>
    <div>
        <h2>ADASDADAD!!</h2>
        <WujieVue width="100%" height="100%" name="vue_dtest" :url="viteUrl" :sync="true"></WujieVue>
    </div>
</template>

<script>
import hostMap from '../hostMap.js';
export default {
    data() {
        return {
            viteUrl: hostMap('//localhost:8080/')
        };
    }
};
</script>

<style></style>

次に、main-vue の hostMap.js ファイルに個人プロジェクトの設定を追加します。プロジェクトのアドレスの値が異なります。同じように書かないでください。動作しません。

コード：

const map = {
    "//localhost:7100/": "//wujie-micro.github.io/demo-react17/",
    "//localhost:7200/": "//wujie-micro.github.io/demo-vue2/",
    "//localhost:7300/": "//wujie-micro.github.io/demo-vue3/",
    "//localhost:7400/": "//wujie-micro.github.io/demo-angular12/",
    "//localhost:7500/": "//wujie-micro.github.io/demo-vite/",
    "//localhost:8080/": "//localhost:8080/",
    "//localhost:7600/": "//wujie-micro.github.io/demo-react16/",
    "//localhost:7700/": "//wujie-micro.github.io/demo-main-react/",
    "//localhost:8000/": "//wujie-micro.github.io/demo-main-vue/",
};

export default function hostMap(host) {
    if (process.env.NODE_ENV === "production") return map[host];
    return host;
}

最後に、main-vue の app.vue に router-link ステートメントを追加します。

プロジェクトには対応するディレクトリが表示されます

質問：

以下の図に示されているのと同じ問題が発生する場合は、ページが読み込まれていません。まず、ページを表示するには、個人プロジェクトが実行されている必要があります。

コンソールを開くとエラーが表示されます

Access to fetch at *** from origin *** has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

それはクロスドメイン問題を解決していないことを意味します

解決

vue.config.js ファイルなどの個人プロジェクトのプロキシを設定します。

/ vue.config.js

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
    publicPath: "./",
    devServer: {
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Headers": "*",
            "Access-Control-Allow-Methods": "*",
        },
        port: "8080",
    },
};

然后重新运行下我们个人的项目，再次刷新页面，就会出现结果，路由跳转也没有问题

マイクロフロントエンド -- アンバウンドソリューションの公式ウェブサイトデモ操作手順