【踩坑】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 也会有问题。所以在使用过程中需要特别注意。

相关推荐
hunterandroid24 分钟前
HarmonyOS WebSocket 实战:断线重连、心跳保活与连接状态机设计
前端
hunterandroid28 分钟前
StateFlow 与 SharedFlow 的边界:状态与事件的正确建模
android·前端
心念科技36 分钟前
1、搜索表单 xnSearch(基于:心念后台,后端 Java 21 + Spring Boot 4 + Spring Cloud,前端提供 ReactVue3+TS、Vue3+JS、Vue2+JS
前端
计算机魔术师1 小时前
Dwarkesh Patel 对 OpenAI/Hugging Face 事件的爆款解读被指危险误导
前端
学习星球1 小时前
OFDM技术精讲:正交性推导、循环前缀原理与80行Python链路仿真(附实测数据)
算法·面试·前端框架
自进化Agent智能体2 小时前
Hermes GitHub PR 审查 —— 自动化代码评审
前端
涛涛ing4 小时前
OpenAI Astra 泄露:零样本生成 3D 网页,前端开发者慌了吗?
前端
ssshooter4 小时前
现在网页都能提供 MCP 了?!
前端·人工智能·程序员
杉氧4 小时前
状态管理变迁史:为什么我们放弃了 Redux 选择 Zustand?
android·前端·react native
cidy_984 小时前
OpenCode 手动配置火山方舟 Agent Plan 教程
前端