Vue динамическая перезапись компонента

Question

В моем проекте используются Laravel и Vue (составлено Laravel-Mix). И имеет такую ​​структуру:

Я хочу проверить, есть ли компоненты в папке с программой перезаписи и загрузить ее порцию, если нетпо умолчанию для папки компонентов. В конце будет несколько папок с программами. Имена программ устанавливаются в Vuex store ATM. Я знаю, что это можно сделать с помощью тега Vue. Но это требует явного объявления компонентов, и я хотел бы избежать этого, так как в конечном итоге каждому компоненту потребуется огромный список импорта.

Answer 1

Есть способ сделать это. То, как вы делаете это через разделение фрагментов Webpack. Используйте динамический импорт - импортируйте компоненты через функцию, которая возвращает новые обещания и имеет что-то вроде '/components/${res}' в пути к компоненту. Сначала мы создаем Обещание, которое пытается загрузить наш компонент по умолчанию следующим образом:

export default function _getDefaultComponent(res){
return new Promise((resolve, reject) => {
    import(
        /* webpackChunkName: "js/chunk/[request]" */
        @/components/${res}
        )
        .then((component) => {
            resolve(component);
        })
        .catch((error) => {
            reject(error);
        });
}

После этого мы создаем функцию перезаписи следующим образом:

import _getDefaultComponent from "@/helpers/_getDefaultComponent";
import { program } from "@/store/program";

export default function _getComponent(res){
return new Promise((resolve, reject) => {
    let programName = program.state.programName;
    import(
        /* webpackChunkName: "js/chunk/program/[request]" */
        @/@program/${programName}/components/${res}
        )
        .then((component) => {
            resolve(component);
        })
        .catch((error) => {
            _getDefaultComponent(res)
                .then((component) => {
                    resolve(component);
                })
                .catch((error) => {
                    console.error(No Component with the name ${res}, error:, error);
                    reject(error);
                });
        });
    });
}

Что мы теперь делаем, так это беремВ имени программы (в данном случае от Vuex) мы пытаемся найти компонент, который находится в папке программы, если он терпит неудачу, возвращаемся к компоненту по умолчанию, если он терпит неудачу, а также выводим на экран ошибку с именем компонента, пытающуюся решить. И наконец, чтобы использовать его, импорт таков:

import _getComponent from "@/helpers/_getComponent";

После этого в вашем компоненте нам нужно:

components:{
    Component: () => _getComponent('Component')
}