有自动导入动态组件的智能功能吗？

Question

如何动态导入动态组件？我找到了一些示例，但它们似乎是一种解决方法。我找不到明确的解释。

我这样一个接一个地导入它们：

Vue.component('account', () => import('../components/Account')
Vue.component('settings', () => import('../components/Settings')
// etc… one for each component

我的主要组成部分是这样的：

<component :is="componentName" :data="myData"/>

data: () => ({
  componentName: 'account'
})

是否有一种方法可以使第一个代码更智能？

Answer 1

尝试一下，改编自the Laravel source：

// replace './' with the relative path to your components
const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], () => import(files(key))))

Answer 2

我找到了解决方法here。

我需要在Webpack上进行动态导入。

https://webpack.js.org/guides/code-splitting/