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

相关推荐
风骏时光牛马30 分钟前
AI浪潮下程序员的职场破局与能力成长思考
前端
ljt272496066132 分钟前
Vue笔记(九)--defineEmits
javascript·vue.js·笔记
IMPYLH36 分钟前
HTML 的 <thead> 元素
前端·html
AomanHao43 分钟前
【阅读笔记】Weighted Guided Image Filtering(WGIF)权重引导滤波
图像处理·人工智能·笔记·计算机视觉·滤波·引导滤波
竹之月1 小时前
MCGS昆仑通态触摸屏背景图分辨率太大,告警解决
人工智能·经验分享
weixin_440730501 小时前
字符编码笔记-utf-8 、unicode、gbk,ascii编码格式
开发语言·笔记
FungLeo9 小时前
成为全栈·React 管理后台篇·总复盘:从“接口能调通”到“后台值得使用”
前端·react.js·前端框架·项目复盘·成为全栈
andyweike9 小时前
php笔记
开发语言·笔记·php
xian_wwq10 小时前
【学习笔记】等保合规安全基线核查实战
笔记·学习
Csvn10 小时前
并发模式:让渲染学会排队、插队和让路
前端