在Vue.js中异步加载组件不起作用

Question

我正在尝试将加载v-tooltip's VPopper的组件从标准加载替换为异步加载。

标准加载-已加载组件并正常工作

import { VPopover } from 'v-tooltip'

export default {
  components: {
    VPopover
  }
}

异步加载-组件未正确加载

export default {
  components: {
    VPopover: () => import('v-tooltip')
  },
}

由于上述某些原因，该按钮无法正常工作，并且组件未正确加载。也许是因为它不是默认导出，而是在v-tooltip Vue组件中命名为export？

我正在内部使用Webpack。

如果我异步加载自定义组件，则它将按预期工作。例如，这对我有用：

export default {
  components: {
    MyCustomComponent: () => import('@/components/MyCustomComponent.vue')
  }
}

Answer 1

就像@gugadev在上面提到的那样

  

惰性模块导入返回带有模块导出的Promise，在   您的案例中包含命名出口的对象。 Vue不知道是什么   的指定出口中应该进口的，所以什么也不做。

我发现此解决方案有效

export default {
  components: {
    VPopover: () => import('v-tooltip').then(m => m.VPopover)
  }
}