動態加載一個 vuejs 庫並在其上渲染組件

Question

我有一個 vuejs 應用程序作為多個其他“應用程序”的容器。 當時的想法是：

• 有一個通用代碼來發現/加載組件
• 將其他應用程序構建為 vuejs lib，以便能夠在其上加載組件

在我的第一個庫中，我有這個 main.js：

import HelloRadar from './components/HelloRadar.vue'
export default HelloRadar

這個組件，HelloRadar：

<template>
  <div>
    Hello from radar !
  </div>
</template>

<script>
export default {
  name: 'HelloRadar'
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

現在，在我的主應用程序上，我有以下代碼：

<template>
    <div>
        <ul>
            <li v-for="module in modules" v-bind:key="module" @click="loadModule(module)">
                {{ module }}
            </li>
        </ul>
    </div>
</template>

<script>

    import axios from 'axios';

    export default {
        name: 'HelloWorld',
        data() {
            return {
                modules: [],
                selectedModuleMenu : null,
                selectedModuleApp : null
            }
        },
        created: function () {
            axios.get("/orbit/api/modules").then((response) => {
                var modulesList = response.data;
                this.modules = modulesList;
            });
        },
        methods: {
            loadModule: function (moduleName) {
                this.loadExternalComponent("/modules/" + moduleName + "/"+ moduleName + ".umd.js");
            },
            loadExternalComponent : function(url) {
                const name = url.split('/').reverse()[0].match(/^(.*?)\.umd/)[1];

                if (window[name]) return window[name];

                window[name] = new Promise((resolve, reject) => {
                    const script = document.createElement('script');
                    script.async = true;
                    script.addEventListener('load', () => {
                    resolve(window[name]);
                    });
                    script.addEventListener('error', () => {
                    reject(new Error(`Error loading ${url}`));
                    });
                    script.src = url;
                    document.head.appendChild(script);
                });

                return window[name];
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

問題是函數 loadExternalComponent 似乎不起作用。 我在控制台中收到此 js 錯誤：

未捕獲的類型錯誤：無法讀取未定義的屬性“createVNode”

Uncaught (in promise) TypeError: Chaining cycle detection for promise #

我從這里選擇了這個方法https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/

你知道如何制作這種應用程序嗎？ 使用 lib 是正確的方法嗎？ 謝謝你的幫助

Answer 1

我想你的問題有一個答案：

通過 Vue 3 vue-cli 構建的組件依賴於 Vue 在全局范圍內可用。 因此，為了渲染通過我文章中描述的技術加載的組件，您需要將 window.Vue 設置為對 Vue 本身的引用。 然后一切都按預期進行。

馬庫斯·奧伯萊納

@moriartie (Markus Oberlehner) 已經用 @markoffden 解決了這個問題： Vue 3 外部組件/插件在運行時加載