Как динамически загрузить компонент Vue после использования require.context? - PullRequest
Новая
       28

Как динамически загрузить компонент Vue после использования require.context?

0 голосов
/ 25 апреля 2018

В настоящее время я загружаю все свои компоненты Vue с помощью require.context, при этом в моем каталоге 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 в названии.Что заставляет меня принять определенное соглашение об именах для асинхронных компонентов.Также не идеально.

Есть ли лучший способ сделать это?

1 Ответ

0 голосов
/ 04 апреля 2019 
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
    }, {})
...