根据条件导入 VueJs 组件

Question

我正在研究微前端架构，其中多个团队在不同的页面上工作，或者可能在一个页面上。

我在 vue2( Feature1.vue ) 中有一个组件，我必须根据组件的需要动态导入它。 如果不需要Feature1.vue ，那么它不应该是捆绑包的一部分。

如果任何团队需要该组件，那么它将成为构建的一部分，并且捆绑包的大小也会增加。

如果为 true，则使用props或任何标志，如果为 false，则只有它应该是捆绑包的一部分，它应该从捆绑包中删除。 可能吗？

我正在使用 Vue 2 而我没有使用 Vue 路由器。

Answer 1

https://v2.vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components

本文与名称无关，但提供了动态导入解决方案。

beforeCreate: function () {
  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}

components: {
  TreeFolderContents: () => true ? import('./tree-folder-contents.vue') : undefined
}