关于vite的glob坑

news2024/9/24 13:23:56

我先展示一段代码:

/**
 * @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;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1364888.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CSS3渐变属性详解

渐变属性 线性渐变 概念:线性渐变,指的是在一条直线上进行的渐变。在线性渐变过程中,起始颜色会沿着一条直线按顺序过渡到结束颜色 语法: background:linear-gradient(渐变角度,开始颜色,结束颜色);渐变…

循环队列的队空队满情况

有题目: 循环队列放在一维数组A[0....M-1]中,end1指向队头元素,end2指向队尾元素的后一个位置。假设队列两端均可进行入队和出队操作,队列中最多能容纳M-1个元素。初始时为空。下列判断队空和队满的条件中,正确的是 …

移动通信原理与关键技术学习(第四代蜂窝移动通信系统)

前言:LTE 标准于2008 年底完成了第一个版本3GPP Release 8的制定工作。另一方面,ITU 于2007 年召开了世界无线电会议WRC07,开始了B3G 频谱的分配,并于2008 年完成了IMT-2000(即3G)系统的演进——IMT-Advanc…

进程与计划任务管理

目录 一、进程 1.进程相关概念 2.判断线程 3.进程的命令 ps命令 top命令 pstree命令 kill与killall命令 二、计划任务 1.一次性执行任务 2.定时性周期任务 一、进程 1.进程相关概念 程序:保存在硬盘等介质中的可执行的代码。 进程:正在运行…

C++学习笔记(二十四):c++ this

this指针在c中较为常用。this是一个指向当前对象实例的指针,通过this指针,可以访问该类的成员函数。示例如下:this指针主要的使用场景是在类内部调用类外部的函数,该函数传递的参数是调用该函数的类对象,代码示例如下&…

关于整形提升

个人主页:Lei宝啊 愿所有美好如期而遇 什么是整型提升? 在C语言的整型算数运算总是至少以int类型来进行的,当表达式中有char,byte,short类型的操作数时,他们在被使用前需要被转换成int类型,…

归并排序例题——逆序对的数量

做道简单一点的题巩固一下 归并排序实现步骤 将整个区间 [l, r] 划分为 [l, mid] 和 [mid1, r]。 递归排序 [l, mid] 和 [mid1, r]。 将左右两个有序序列合并为一个有序序列。 题目描述 给定一个长度为 n 的整数数列,请计算数列中的逆序对的数量。 逆序对的定义…

linux 02 vmware的快照,文件管理

01.快照 使用快照: 同时的快照管理器: 如果想要返回快照,选择要选择的快照,跳转 02. 文件管理: cd 02.touch 2. mkdir 文件夹 mkdir -p 文件夹 (创建之前没有的上级文件夹)

HTML5+CSS3小实例:人物介绍卡片2.0

实例:人物介绍卡片2.0 技术栈:HTML+CSS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><…

【Python学习】Python学习5-条件语句

目录 【Python学习】Python学习5-条件语句 前言if语句if语句判断条件简单的语句组参考 文章所属专区 Python学习 前言 本章节主要说明Python的条件语句&#xff0c;Python条件语句是通过一条或多条语句的执行结果&#xff08;True或者False&#xff09;来决定执行的代码块。 …

支付宝扫码(Easy版)支付实现

文章目录 一 技术准备1.1 二维码技术&#xff08;java&#xff09;1.2 支付宝沙箱环境准备1.3 内网穿透 二 支付宝支付相关知识2.1 各种支付方式2.2 扫码付接入流程2.3 系统交互流程(时序图)2.4 加密逻辑 三 扫码支付实现3.1 添加maven依赖&#xff08;Easy版&#xff09;3.2 完…

SSM农产品朔源管理系统----计算机毕业设计

项目介绍 本项目分为前后台&#xff0c;分为普通用户、管理员、企业用户三种角色&#xff1b; 普通用户无需登录&#xff0c;可在前台直接进行溯源查询&#xff0c;管理员、企业用户可登录后台进行管理&#xff1b; 超级管理员角色包含以下功能&#xff1a; 登录,管理企业,设…

Nacos与Eureka

一、前言 在构建和管理微服务架构时&#xff0c;选择适当的服务注册中心至关重要。Nacos和Eureka都是微服务体系结构中常用的服务注册和发现工具。本文将探讨它们之间的区别&#xff0c;帮助开发者在选择适合其项目需求的注册中心时做出明智的决策。 二、架构和适用场景 Nacos …

重生奇迹MU游戏中勇者大陆

玩重生奇迹MU&#xff0c;我们进入游戏首先会来到勇者大陆。在看到勇者大陆市场&#xff0c;有很多交易的玩家也在这里&#xff0c;在勇者市场里面有商店。接下来介绍主要的NPC 的作用和怪物有那些&#xff1f; 勇者大陆卖药的商店老板莉雅 商店里面会有卖治疗药水&#xff0…

API集群负载统计 - 华为OD统一考试

OD统一考试 分值: 100分 题解: Java / Python / C++ 题目描述 某个产品的RESTful API集合部署在服务器集群的多个节点上,近期对客户端访问日志进行了采集,需要统计各个API的访问频次,根据热点信息在服务器节点之间做负载均衡,现在需要实现热点信息统计查询功能。 RESTf…

Python 操作 JMeter 探索:pymeter 实操指南

概要 JMeter 是一个流行的性能测试工具&#xff0c;用于测试 Web 应用程序的性能和负载。它通常与 GUI 一起使用&#xff0c;但如果您想在自动化测试中集成 JMeter&#xff0c;或者以编程方式创建和运行测试计划&#xff0c;那么 pymeter 库将是一个强大的工具。本文将介绍如何…

Camtasia2024苹果Mac电脑版(屏幕录制剪辑软件)

Camtasia Mac2024免费版是一款由TechSmith公司官方进行汉化推出的最新版本&#xff0c;借助Camtasia&#xff0c;您可以轻松记录屏幕并创建优美&#xff0c;专业的视频。记录所有内容-您的整个屏幕或只是一个窗口。或者&#xff0c;添加您已经拥有的视频&#xff0c;图像&#…

Spring Boot应用启动时自动执行代码的五种方式

Spring Boot为开发者提供了多种方式在应用启动时执行自定义代码&#xff0c;这些方式包括注解、接口实现和事件监听器。在本篇博客中&#xff0c;我们将探讨一些常见的方法&#xff0c;以及如何利用它们在应用启动时执行初始化逻辑。 1. PostConstruct注解 PostConstruct注解…

下载的 MongoDB bin目录下没有mongo.exe文件问题解决

MongoDB 4.4版本之前&#xff0c;我们可以在MongoDB的安装目录的bin文件夹中找到mongo.exe这个命令行工具。但是从MongoDB 4.4版本开始&#xff0c;MongoDB官方已经不再提供独立的mongo.exe可执行文件&#xff0c;而是将其整合到了mongosh这个新的交互式Shell中。 我们可以访问…