【踩坑】Vue3项目正常跑动后页面空白问题

news2024/11/24 9:24:01

        近期踩了个坑,Vue3搭建的项目能够正常跑动,但是页面却是空白的,控制台也不报错,只留下一行警告:

        发现是 router 入口文件(一般是在 router 文件夹下的 index 里面)的写法和 vite 版本不匹配的问题。

        随着 Vite 版本的更新,一些 API 可能会发生变化或被弃用,这会导致在升级 Vite 或项目迁移时遇到兼容性问题。我遇到的问题正是因为 Vite 的版本更新导致了 import.meta.globEager 的使用方式变化。

2.x 版本的 vite

        如果你的 Vite 版本是 2.9.8 或类似的 2.x 版本,你应该使用 import.meta.globEager 来动态导入路由文件。这个 API 在 Vite 2.x 中是支持的,但需要注意它在更高版本中可能会被弃用。

import.meta.globEager() 直接引入所有的模块 Vite 独有的功能
const modules = import.meta.globEager("./routes/**.ts") as any; // vite 2.9.18 版本时需要换成这个

5.x 版本的 vite

        在 Vite 5.x 版本中,import.meta.globEager 已经被弃用,取而代之的是使用 import.meta.glob 并配合 { eager: true } 选项。你需要按以下方式修改你的代码:        

const modules = import.meta.glob("./routes/**.ts", {eager: true}) as any;  // Vite 5.33 版本时需要换成这个

        注意:因为在 globEager 方法在后续的 vite 版本中已经被弃用了,所以我们在 5.0 版本中使用它就有问题,同理,在 2.9.8 版本中使用 glob 也会有问题。所以在使用过程中需要特别注意。

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

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

相关文章

AI算力池化技术在银行业的最佳实践荣获“科学普及达人奖”

纵观半个多世纪以来的金融行业发展历史,每一次技术升级与商业模式变革依赖科技赋能与理念创新的有力支撑,以人工智能为代表的新技术给金融机构了带来巨大效益。 近日,由中国人民银行科技司指导、北京金融科技产业联盟支持、《金融电子化》杂…

AlmaLinux 9 上配置静态 IP 地址

在 Rocky Linux 9 中,密钥文件的新默认存储位置在 /etc/NetworkManager/system-connections 中 cd /etc/NetworkManager/system-connections默认dhcp配置 ~ …

数集相等定义推翻2300年直线公理

黄小宁 2300年前的古人认为凡懂什么是直线的人都知过两异点只能画一条直线从而有初中的2300年直线公理,继而有平行公理和平面公理等。然而数集相等概念凸显直线公理使数学一直将无穷多各异直线误为同一线。 变量x所取各数也均由x代表。设集A{x&#xf…

CENet及多模态情感计算实战(论文复现)

CENet及多模态情感计算实战(论文复现) 本文所涉及所有资源均在传知代码平台可获取 文章目录 CENet及多模态情感计算实战(论文复现)概述研究背景主要贡献论文思路主要内容和网络架构数据集介绍性能对比复现过程(重要&am…

数据集成在搭建“智慧校园”中的使用

智慧校园是一种新型校园数字化建设方式,目前被全国高校使用。 智慧校园利用现代信息技术,如物联网、云计算、大数据等,搭建集成硬件设施和数据平台,实现校园管理高度信息化,提高校园管理的效率。 如何搭建“智慧校园…

SPI驱动学习五(如何编写SPI设备驱动程序)

目录 一、SPI驱动程序框架二、怎么编写SPI设备驱动程序1. 编写设备树2. 注册spi_driver3. 怎么发起SPI传输3.1 接口函数3.2 函数解析 三、示例1:编写SPI_DAC模块驱动程序1. 要做什么事情2. 硬件2.1 原理图2.2 连接 3. 编写设备树4. 编写驱动程序5. 编写app层操作程序…

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备…

Linux 网络编程 --- 应用层

一、自定义协议和序列化反序列化 代码: 序列化反序列化实现网络版本计算器 二、HTTP协议 1、谈两个简单的预备知识 https://www.baidu.com/ --- 域名 --- 域名解析 --- IP地址 http的端口号为80端口,https的端口号为443 url为统一资源定位符。CSDN…

Java+Swing图书管理系统

JavaSwing图书管理系统 一、系统介绍二、功能展示1.管理员登陆2.图书查询3.图书入库4.借书5.还书6.图书证管理 三、系统实现1.BookManageMainFrame.java 四、其它1.其他系统实现 一、系统介绍 该系统实现了用户端实现书籍查询,借书,还书功能。用户能够查…

QLib学习

开源地址:GitHub - microsoft/qlib: Qlib is an AI-oriented quantitative investment platform that aims to realize the potential, empower research, and create value using AI technologies in quantitative investment, from exploring ideas to implementi…

为何在106短信群发前需完成实名认证?

为了严格遵循国家法律法规及电信运营商的规范要求,确保您及贵公司的合法权益得到充分保障,使用云通信服务进行106短信群发前,实名认证成为必要步骤。 根据《中华人民共和国网络安全法》第二十四条的明确规定: 法律强制性要求&…

vulhub think PHP 2-rce远程命令执行漏洞

1.开启环境 2。访问对应网站端口 3.这里我们直接构造payload,访问phpinfo() http://192.168.159.149:8080/?s/Index/index/L/${phpinfo()} 4.可以访问到我们的phpinfo, 所以写入一句话木马,也可使用蚁剑进行连接,获得其shell进…

GenAI 用于客户支持 — 第 4 部分:调整 RAG 搜索的相关性

作者:来自 Elastic Antonio Schnmann 欢迎阅读我们关于将生成式 AI 集成到 Elastic 客户支持的博客系列的第 4 部分。本期深入探讨了检索增强生成 (RAG) 在增强我们 AI 驱动的技术支持助理方面的作用。在这里,我们解决了改进搜索效果的挑战、解决方案和结…

【C++】windwos下vscode多文件项目创建、编译、运行

目录 🌕vscode多文件项目创建方法🌙具体案例⭐命令行创建项目名,并在vscode中打开项目⭐创建include目录和头文件⭐创建src目录和cpp文件⭐根目录下创建main.cpp 🌕运行项目失败(找不到include目录下的头文件和src目录…

实习生进了公司不会开发?一个真实业务教会你如何分析业务!

一、权限业务介绍 本业务为个人试用期的时候的真实企业级业务,进行了简单的替换词和业务内容模糊,但是业务逻辑没有变化,值得学习,代码部分可能因为替换词有部分误解,发现问题请评论区提醒我。 这个业务教会了我&…

最新前端开发VSCode高效实用插件推荐清单

在此进行总结归类工作中用到的比较实用的、有助于提升开发效率的VSCode插件。大家有其他的好插件推荐的也欢迎留言评论区哦😄 基础增强 Chinese (Simplified) Language Pack: 提供中文界面。 Code Spell Checker: 检查代码中的拼写错误。 ESLint: 集成 ESLint&…

AIoTedge边缘计算+边缘物联网平台

在数字化转型的浪潮中,AIoTedge边缘计算平台以其边云协同的架构和强大的分布式AIoT处理能力,正成为推动智能技术发展的关键力量。AIoTedge通过在数据源附近处理信息,实现低延迟、快速响应,增强了应用的实时性。同时,它…

CCF推荐C类会议和期刊总结:(计算机网络领域)

CCF推荐C类会议和期刊总结(计算机网络领域) 在计算机网络领域,中国计算机学会(CCF)推荐的C类会议和期刊为研究者提供了广泛的学术交流平台。以下是对所有C类会议和期刊的总结,包括全称、出版社、dblp文献网…

DMDPC单副本集群安装

1. 环境描述 2. 部署步骤 2.1. 安装DM数据库软件启动DMAP [dmdbalei1 ~]$ DmAPService status DmAPService (pid 1269) is running.2.2. 初始化数据库实例 [dmdbalei1 data]$ dminit path/dmdba/data/sp1 instance_nameSP1 port_num5236 ap_port_num6000 dpc_modeSP initdb …

野火霸天虎V2学习记录

文章目录 嵌入式开发常识汇总1、嵌入式Linux和stm32之间的区别和联系2、stm32程序下载方式3、Keil5安装芯片包4、芯片封装种类5、STM32命名6、数据手册和参考手册7、什么是寄存器、寄存器映射和内存映射8、芯片引脚顺序9、stm32芯片里有什么10、存储器空间的划分11、如何理解寄…