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

近期踩了个坑,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 中是支持的,但需要注意它在更高版本中可能会被弃用。

javascript 复制代码
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 } 选项。你需要按以下方式修改你的代码:

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

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

相关推荐
kdxiaojie12 小时前
Linux USB驱动阅读笔记(1)
linux·笔记·学习·usb
Buke..13 小时前
【APP 逆向】哔哩哔哩 sign 参数逆向(下):OLLVM 混淆还原 sign 算法
java·javascript·爬虫·python·算法
半生过往13 小时前
前端学 Java 课程笔记
java·前端·笔记
九硕智慧建筑一体化厂家13 小时前
楼宇自控|智慧建筑核心引擎!楼宇自控系统,赋能建筑高效低碳运维
运维·人工智能·笔记·智慧城市
沙盘客13 小时前
AFSIM 官方案例库全景与解读方法论
c++·经验分享·后端
广州华水科技14 小时前
2026年单北斗GNSS变形监测系统推荐,破解水库安全监测难题
前端
IT小白杨14 小时前
当MCP遇上指纹浏览器:AI自然语言驱动隔离环境的实践思路
人工智能·经验分享·selenium·安全·业界资讯·指纹浏览器
GGMM78914 小时前
施耐德 VX5A1HC90110(VX5A1HD9011)ATV61/ATV71 90‑110KW 电源驱动板详解
笔记·变频器·变频器维修
独爱香菜14 小时前
Next.js 15 + Cloudflare Workers 实战:零中间件多语言 SEO 站点架构
前端
计算机魔术师14 小时前
DeepSeek、Qwen3比肩GPT-5,本地跑大模型的时代来了
前端