是否有自动导入动态组件的智能功能

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

试试这个，改编自Laravel的源代码：

// 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

我在这里找到了解决方案。

我需要在 Webpack 上动态导入。

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