vue 加载动态组件

背景

之前的文章[vue动态加载静态js插件]已经介绍，可以使用ajax的方式加载静态js库,项目里会把这些插件缓存在一个全局变量allPluginsComps里，可随时修改。

    for (const item of this.installedList) {
        let url =
          "/plugins/" + item.pluginId + "/dist/" + item.pluginId + ".common.js";
        const response = await this.$axios.get(url);
        if (response.status === 200) {
          this.allPluginsComps[item.pluginId] = eval(response.data);
        }
      }

通过vue加载[动态组件]可以实现，activePluginId是激活的pluginId。

<component :is="allPluginsComps[activePluginId]"> </component>

按整个实现来说，加载动态组件其实并不难，难得是整套的实现思路。思路清晰了写起代码才easy。本次加载动态组件的过程一共分了3步走：

1. [vue-cli3 打包组件为单个js文件]
2. [vue动态加载静态js插件]
3. 本文