关于vite的glob坑

2024-01-07 18:48:42

我先展示一段代码:

/**
 * @function 根据pages路径动态生成路由
 * @param {Array} 基础路由
 */
export default function (routes) {
    const modules = import.meta.glob("../pages/**/page.js", { eager: true, import: "default" });
     const comps = import.meta.glob("./../pages/**/index.vue", { eager: true, import: "default" });
    const newRoutes = Object.entries(modules).map(([path, meta]) => {
        const pageJsPath = path;
        const compPage = pageJsPath.replace("page.js", "index.vue");
        path = path.replace("../pages", "").replace("/page.js", "") || "/";
        const name = path.replaceAll("/", "-").slice(1);
        return {
            path,
            name,
            component: comps[compPage],
            meta
        };
    });
    const index = routes.findIndex(route => route.path === "/");
    routes[index].children = newRoutes;
    return routes;
}

看一下没有什么问题,路径也都正常。嗯~一切都非常合理,然后打包,打完包启动项目以看,我嘞个豆,路由重定向到开发环境时候的路径了。然后我就去vite官网上查看glob。

也就是我特么的用了 ../ 可能就是他导致的问题,修改后问题解决了!!!!!

/**
 * @function 根据pages路径动态生成路由
 * @param {Array} 基础路由
 */
export default function (routes) {
    const modules = import.meta.glob("/src/pages/**/page.js", { eager: true, import: "default" });
     const comps = import.meta.glob("./../pages/**/index.vue", { eager: true, import: "default" });
    const newRoutes = Object.entries(modules).map(([path, meta]) => {
        const pageJsPath = path;
        const compPage = pageJsPath.replace("page.js", "index.vue");
        path = path.replace("/src/pages", "").replace("/page.js", "") || "/";
        const name = path.replaceAll("/", "-").slice(1);
        return {
            path,
            name,
            component: comps[compPage],
            meta
        };
    });
    const index = routes.findIndex(route => route.path === "/");
    routes[index].children = newRoutes;
    return routes;
}

文章来源:https://blog.csdn.net/weixin_63443072/article/details/135401302
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。