Vue.js 异步组件，命名为 import

【问题标题】：Vue.js asyncronous components, named importVue.js 异步组件，命名为 import
【发布时间】：2019-03-27 13:47:18
【问题描述】：

我知道如何在 Vue 中加载异步组件。这个

import MyComponent from '@/components/MyComponent'

export default {
  components: {
    MyComponent
  }
}

被替换为

export default {
  components: {
    MyComponent: () => import('@/components/MyComponent')
  }
}

但是我怎样才能像这样替换“命名”组件导入？

import { SweetModal } from 'sweet-modal-vue'

export default {
  components: {
    SweetModal
  }
}

如何异步导入？

【问题讨论】：

【解决方案1】：

您可以以相同的方式使用，但获取您的特定组件：

export default {
  components: {
    SweetModal: () => import('sweet-modal-vue').then(m => m.SweetModal)
  }
}

我建议您阅读以下内容：Async Vue.js Component

【讨论】：

找不到模块：错误：无法解析 'sweet-modal-vue/SweetModal'
@mthrsj 没有错误，直到我想通过调用 this.$refs.myModal.open() 实际打开该模式。这适用于静态导入。
@appleapple resolve 是解决方案。我把它弄干净了一点。您的解决方案还需要 resolve()。现在有效的解决方案是SweetModal: () => import('sweet-modal-vue').then(m => m.SweetModal)。我已经更新了答案！