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

相关推荐
im_AMBER1 天前
React 04
前端·react.js·前端框架·1024程序员节
陈苏同学1 天前
笔记1.4:机器人学的语言——三维空间位姿描述 (旋转矩阵 - 齐次变换矩阵 - 欧拉角 - 四元数高效表示旋转)
笔记·线性代数·算法·机器人
岑梓铭1 天前
考研408《计算机组成原理》复习笔记,第五章(5)——CPU的【指令流水线(含中断)】
笔记·考研·408·计算机组成原理·计组
fhsWar1 天前
Vue3 props: `required: true` 与 vant 的`makeRequiredProp`
前端·javascript·vue.js
递归不收敛1 天前
多模态学习大纲笔记(未完成)
人工智能·笔记·学习·自然语言处理
泷羽Sec-静安1 天前
Less-1 GET-Error based-Single quotes-String GET-基于错误-单引号-字符串
前端·css·网络·sql·安全·web安全·less
小时前端1 天前
虚拟DOM已死?90%内存节省的Vapor模式正在颠覆前端
前端·html
Metaphor6921 天前
Java操作PDF图层:添加、设置和删除
经验分享
Keepreal4961 天前
Web Components简介及如何使用
前端·javascript·html
进击的野人1 天前
JavaScript变量声明的前世今生:从var到let/const的演进
javascript