Vue-动态导入vue组件

Question

我有很多组件，我想按需导入。我有一个下拉列表，其中实际包含组件列表，即要加载的内容。我试过这个例子

<component :is="componentLoader"></component>

在脚本中

componentLoader () {
  return () => import('@/components/testDynamic')
}

testDynamic 是一个组件名称（现在我正在尝试使用静态组件）。

收到此错误

GET http://localhost:8080/0.js net::ERR_ABORTED 404
[Vue warn]: Failed to resolve async component: function () {
    return __webpack_require__.e/* import() */(0).then(__webpack_require__.bind(null, "./src/components/testDynamic.vue"));
  }
  Reason: Error: Loading chunk 0 failed.

如何解决这个问题？我做错了什么吗？还是有其他方法可以动态导入组件？

原文由 Sam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以像这样在单个文件组件中本地注册异步动态组件：

 export default {
  components: {
    'test-dynamic': () => import('@/components/testDynamic'),
    'other-dynamic': () => import('@/components/otherDynamic')
  },
  data () {
    return {
      current: 'test-dynamic'
    }
  }
}

在你的模板中：

 <component :is="current"></component>

如果您注册了多个组件，那么您只需将 current 的值更改为所需的组件。

对于许多组件，您可以导入一个对象，将组件名称映射到它们各自的文件路径，然后像这样注册它们：

 import myComponents from '@/components'

export default {
  components: Object.keys(myComponents).reduce((obj, name) => {
    return Object.assign(obj, { [name]: () => import(myComponents[name]) })
  }, {})
  ...
}

其中 myComponents 导出为：

 // components/index.js
export default {
  foo: '@/path/to/Foo',
  bar: '@/path/to/Bar',
  ...
}

原文由 Brian Lee 发布，翻译遵循 CC BY-SA 4.0 许可协议