使用 JSON 文件在 VueJS 错误中找不到模块

Question

I was given a task in finding a way to dynamically import pages inside vuejs projects; built with a CLI tool the team I am in, is working on. I tried using functions as a string ("() => import(...)") and then eval that string and that did not work. Currenly I have used:

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

then I use a "driver" to then pass into our routes.ts file:

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;

Which im getting "cannnot find module" errors. Also when i log the output i get this when i check the component function: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter.

Is there a way that i can dynamically pass routes using this json file? (Because we are reading and writing to/from the json file to keep/update the routes)

Answer 1

你可以使用动态导入来延迟加载 Vue 组件，它甚至在你安装 vue-router 时默认包含在内

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

Answer 2

when you say dynamically import pages, I believe it is something related to lazy load the component dynamically ? If so, you need to have a HOC for all your route components which can basically use es6 import() (promise based) to fetch the component . You can also use webpack magic comments for the same(if you are using webpack). hope it helps