2

我尝试使用Ara Framework来实现微前端。我选择Nuxt 框架作为我的主要应用程序，它“连接”了我的微前端。微前端是用 VueJs 框架实现的。

这是我的一个微前端（在 VueJs 中），它实现了一个非常简单的组件：

简历Fournisseur.vue：

<template>
    <b-row>
        <b-col cols="3">
            <div>
                LOGO
            </div>
            <div>
                <label>Choisissez votre fournisseur :</label>
                <select name="supplier" v-model="sellerSelectedValue">
                    <option v-for="fournisseur in fournisseurs"
                            :key="fournisseur.id"
                            v-bind:value="fournisseur.id">
                        {{ fournisseur.name }}
                    </option>
                </select>


                <button class="u-btn u-btn-primary">Voir les produits</button>

            </div>
        </b-col>
        <b-col cols="9">
            <h1>{{ sellerSelectedLabel }}</h1>
        </b-col>
    </b-row>
</template>

<script>
    export default  {
        name: 'ResumeFournisseur',
        props: {
            supplierId: String
        },
        data() {
            const fournisseurs = [
                {
                    id: -1,
                    name: 'Aucun fournisseur'
                },
                {
                    id: 1,
                    name: 'Renault'
                },
                {
                    id: 2,
                    name: 'Acial'
                }
            ];
            return {
                sellerSelectedValue: fournisseurs[0].id,
                fournisseurs : fournisseurs,
                sellerSelectedLabel: fournisseurs[0].name,
            }
        },
        mounted() {
            if (typeof this.supplierId != 'undefined'){
                this.sellerSelectedValue = this.supplierId;
            }
        },
        watch: {
            sellerSelectedValue: function () {
                const recup = this.fournisseurs.filter(four => four.id == this.sellerSelectedValue);
                this.sellerSelectedLabel = recup[0].name;
            }
        }
    }
</script>

这里是我的 index.js 文件：

import hypernova from 'hypernova/server'
import {renderVuex, renderVue, Vue} from 'hypernova-vue/server'
import express from 'express'
import path from 'path'

import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

//import createStore from './store/modules/listComponent'
import ResumeFournisseur from './components/ResumeFournisseur';

Vue.use(BootstrapVue)

hypernova({
    devMode: process.env.NODE_ENV !== 'production',
    getComponent(name) {
        switch (name) {
        case 'ResumeFournisseur' :
            return renderVue(name, Vue.extend(ResumeFournisseur));
        }
    },

    port: process.env.PORT || 3001,

    createApplication() {
        const app = express()

        app.use('/public', express.static(path.join(process.cwd(), 'dist')))

        return app
    }
})

然后在我的 Nuxt 应用程序中：

<template>
  <b-container fluid>
    <div>
        <nova name="ResumeFournisseur" :data="{}"/>
    </div>
  </b-container>
</template>

<script>
import Nova from "nova-vue-bridge";
import NovaClusterService from "../middleware/novaClusterService";

export default {
    components: {
        Nova
    },
    head () {
        return {
            title: 'Accueil',
            script: [
                { src:
                        'http://localhost:3001/public/client.js'
                }
            ]
        }
    }
}
</script>

它工作得很好。

但是当我尝试将Nova Cluster聚合器与Nova Proxy结合使用时，我不知道如何在不使用 http://localhost:3001/public/client.js 的情况下在我的 Nuxt 应用程序中呈现我的 micro-fontend。这是我的views.json文件：

{
  "ResumeFournisseur": {
    "server": "http://localhost:3001/batch"
  }
}

这里是我的 nova-proxy.json 文件：

{
  "locations": [
    {
      "path": "/",
      "host": "http://localhost:3000",
      "modifyResponse": true
    }
  ]
}

（记住，Nuxt 在 3000 端口上运行）。我运行ara run cluster --config ./views.json（如文档所述）。然后我跑

set HYPERNOVA_BATCH=htpp://localhost:8000/batch
ara run:proxy --config nova-proxy.json

因为我在 Windows 环境中，所以我做了一组。当我在新星集群上发帖时：

{
  "ResumeFournisseur": {
    "name": "ResumeFournisseur",
    "data": {
    }
  }
}

它做出了很好的反应。非常好 ！！但是 nova 代理没有做任何事情:(。文档说如果它绑定到 nova 集群（感谢 HYPERNOVA_BATCH 变量），它将能够渲染由 nova 集群渲染的视图。

当然，如果我将集群响应嵌入到 v-html 指令中（在我的 NuxtJs 主应用程序中），则微前端被嵌入但不做任何事情（非交互式）。

我错过了什么吗？我阅读了很多关于这个主题的文档，我怀疑我的选择/理解。

如果有人可以帮助我，那真的很棒:) !!!

4

1 回答 1

0

最后，我发现了我的误解。我必须在浏览器上访问 http://localhost:8080，它会调用 nova 代理，它称自己为 nova 集群。事实上，您不能删除 client.js 的使用，因为您获得了业务方面的支持。

我在 stackoverflow 上找到了一篇关于这个主题的文章。

于 2020-07-06T15:19:32.163 回答