使用 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）。 希望能幫助到你