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

Question

我的任务是找到一种在 vuejs 项目中动态导入页面的方法； 使用我所在团队正在开发的 CLI 工具构建。 我尝试将函数用作字符串 ("() => import(...)") 然后评估该字符串，但没有奏效。 目前我使用过：

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

然后我使用“驱动程序”传递到我们的 routes.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' 属性可能无法在严格模式函数上访问，或者在函数中调用它们的参数对象。调用Getter。

有没有办法可以使用这个 json 文件动态传递路由？ （因为我们正在读取和写入 json 文件以保持/更新路由）

Answer 1

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

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

Answer 2

当您说动态导入页面时，我认为这与动态延迟加载组件有关？ 如果是这样，您需要为所有路由组件设置一个 HOC，它基本上可以使用 es6 import()（基于承诺）来获取组件。 您也可以使用 webpack 魔术注释（如果您使用的是 webpack）。 希望能帮助到你