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

小白探索世界欧耶！~2024-09-09 17:20

近期踩了个坑，Vue3搭建的项目能够正常跑动，但是页面却是空白的，控制台也不报错，只留下一行警告：

发现是 router 入口文件（一般是在 router 文件夹下的 index 里面）的写法和 vite 版本不匹配的问题。

随着 Vite 版本的更新，一些 API 可能会发生变化或被弃用，这会导致在升级 Vite 或项目迁移时遇到兼容性问题。我遇到的问题正是因为 Vite 的版本更新导致了 import.meta.globEager 的使用方式变化。

如果你的 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 版本时需要换成这个

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