Не удается найти модуль в VueJS Ошибка при использовании файла JSON

Question

Мне было дано задание найти способ динамического импорта страниц внутри vuejs проектов; созданный с помощью инструмента CLI, над которым работает команда Я попытался использовать функции в качестве строки ("() => import (...)"), а затем проверить эту строку, и это не сработало. В настоящее время я использовал:

{
    "routes": [
        {
            "name": "Login",
            "path": "/login",
            "component": "../../src/pages/auth/login/*"
        },
        {
            "name": "Register",
            "path": "/register",
            "component": "@/pages/auth/register"
        }
    ]
}

, затем я использую «драйвер», чтобы затем перейти в наш файл rout.ts:

import * as dynamicRoutes from './routes.json';

const routes: any[] = [];
dynamicRoutes.default.routes.forEach((elem: any) => {
    const component = async () => await require(elem.component).then((comp: any) => comp);
    routes.push({
        name: elem.name,
        path: elem.path,
        component,
    });
});

export default routes;

Что я получаю ошибки «Не удается найти модуль». Также, когда я записываю выходные данные, я получаю это при проверке функции компонента: свойства TypeError: 'caller', 'callee' и 'arguments' не могут быть доступны для функций строгого режима или объектов аргументов для их вызова в Function. invokeGetter.

Есть ли способ, которым я могу динамически проходить маршруты, используя этот файл json? (Потому что мы читаем и пишем в / из файла json для сохранения / обновления маршрутов)

Answer 1

когда вы говорите, динамический импорт страниц, я полагаю, это что-то, связанное с ленивой загрузкой компонента динамически? Если это так, вам нужно иметь HO C для всех ваших компонентов маршрута, которые в основном могут использовать es6 import () (на основе обещаний) для извлечения компонента. Вы также можете использовать комментарии webpack magi c для того же самого (если вы используете webpack). надеюсь, это поможет

Answer 2

Вы можете использовать динамический c импорт для отложенной загрузки Vue компонентов, и даже включается по умолчанию при установке vue -router

const component = () => import(elem.component)