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

相关推荐
用户059540174466 分钟前
Redis缓存回滚踩坑实录:一个配置失误,让我在凌晨3点丢了3000条数据
前端·css
虹科数字化与AR36 分钟前
安宝特方案丨汽车模具增材制造:从数字模型到精密模具的直达通道
经验分享
kyriewen1 小时前
别再这样写条件渲染了——你的React组件里藏着这5种定时炸弹
前端·javascript·react.js
IT_陈寒1 小时前
Redis缓存击穿把我坑惨了,原来这样设过期时间才靠谱
前端·人工智能·后端
用户938515635072 小时前
从"坐电梯"到"前端路由"——深入理解 Hash 路由原理
前端·typescript·全栈
梦想CAD控件2 小时前
网页端CAD的图形选择、编辑与夹点操作教程
前端·javascript·node.js
妙码生花2 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(五十二):管理员权限检查中间件,AI 随意放行预闯大祸
前端·后端·go
月月大王的3D日记2 小时前
Three.js 入门系列(8):六种光源全解析 —— 关灯了,开光!
前端·javascript
达子6663 小时前
第26章_HarmonyOs开发图解之 设备管理
vue.js