背景
之前的文章 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 步走:
vue-cli3 打包组件为单个 JS 文件
vue 动态加载静态 JS 插件
本文
欢迎讨论交流呀~~
来源: http://www.jianshu.com/p/28edb4e9f231