使用 require.context 后如何动态加载 Vue 组件？

Question

目前我正在使用 require.context 加载我的所有 Vue 组件，这会使用正则表达式在我的 components 目录中搜索 .vue 文件。这工作正常，但我想加载异步组件以及动态导入。

目前，当我使用 require.context 时，所有文件都会被加载，所以即使我想使用动态导入，我的文件也已经加载并且没有任何反应。

我需要一种方法从我的require.context 调用中排除某些文件。我无法动态创建正则表达式，因为这不适用于 require.context。

// How I currently load my Vue components.

const components = require.context('@/components', true, /[A-Z]\w+\.vue$/);

components.keys().forEach((filePath) => {
    const component = components(filePath);
    const componentName = path.basename(filePath, '.vue');

    // Dynamically register the component.
    Vue.component(componentName, component);
});

// My component that I would like to load dynamically.
Vue.component('search-dropdown', () => import('./search/SearchDropdown'));

似乎唯一的方法是手动声明我的所有组件，这很麻烦。

或者创建一个静态正则表达式来跳过名称中包含Async 的文件。这迫使我对异步组件采用某种命名约定。也不理想。

有没有更好的方法来做这件事？

Answer 1

const requireContext = require.context('./components', false, /.*\.vue$/)

const dynamicComponents = requireContext.keys()
    .map(file =>
        [file.replace(/(^.\/)|(\.vue$)/g, ''), requireContext(file)]
    )
    .reduce((components, [name, component]) => {
        components[name] = component.default || component
        return components
    }, {})