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

Question

我试图将V-工具提示 VPopper组件从标准加载替换为异步加载。

标准加载-组件加载和正常工作的

import { VPopover } from 'v-tooltip'

export default {
  components: {
    VPopover
  }
}

异步负载组件未正确加载

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

由于上述原因，组件无法正常工作，组件也无法正确加载。也许是因为它不是默认的导出，而是在v-tooltip Vue组件中命名为导出？

我在用Webpack做后盾。

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

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

Answer 1

类似@gugadev在上面已经指出

惰性模块导入返回模块导出的承诺，在您的示例中是包含命名导出的对象。Vue不知道应该导入哪些指定的导出，因此，干脆什么也不做。

我找到了一个可行的解决方案

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