有没有办法使用Hypenova与Nuxt和VueJ，并作出SSR？

Question

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

下面是我的一个微前端(在VueJ中)，它实现了一个非常简单的组件：

ResumeFournisseur.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簇聚合器与Nova代理、结合使用时，我不知道如何在不使用http://localhost:3001/public/client.js的情况下在Nuxt应用程序中呈现我的微字体。在这里，我的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集群呈现的视图。

当然，如果我将集群响应嵌入到NuxtJs指令中(在我的NuxtJs主要应用程序中)，微前端就会被嵌入，但不会做任何事情(不是交互式的)。

，我是不是遗漏了什么??，我读了很多关于这个主题的文档，我怀疑我的选择/理解。

如果有人能帮助我，那就太棒了:)！

Answer 1

最后，我找到了我的妻子。我必须在浏览器上访问http://localhost:8080，它将调用称为nova集群的nova代理。事实上，您不能删除client.js的使用，因为由于这一点，您得到了您的业务端。

我找到了一个关于这个问题的关于堆栈溢出的文章。