Routify 3搭配Vite 5动态路由失效：热重载后_metaTree为空

核心原因 #

@roxi/routify@3.6.4与Vite 5存在热重载（HMR）路由重建兼容性问题。Vite 5的文件监听和模块更新机制相比Vite 4有调整，旧版本Routify的路由生成逻辑未适配该变化，导致文件保存触发HMR后，路由树生成失败，.routify/routes.default.js中的_treeItems和_treeMeta变为空数组。

解决方案 #

1. 升级Routify到兼容版本 #

Routify官方在@roxi/routify@3.7.0及后续版本中修复了Vite 5的HMR路由重建问题。执行以下命令升级：

npm install @roxi/routify@latest

升级后重启开发服务器，保存文件后路由树将正常重建，动态路由可恢复正常。

2. 临时适配配置（无法升级时使用） #

如果暂时无法升级Routify，可在Vite配置中为Routify插件添加强制重载参数，确保路由树完全重建：

// vite.config.js
plugins: [
    routify({ 
        render: { ssg: { enable: false } },
        hmr: { forceReload: true } // 添加此配置
    }),
    // ...其他插件
],

注意：此方法会牺牲局部HMR的效率，每次保存都会刷新整个页面，但能保证路由功能正常。

3. 规范路由目录结构 #

检查src/routes目录是否符合Routify命名规范：

• 动态路由使用[param]格式命名（如src/routes/user/[id].svelte）
• 布局文件使用__layout.svelte或_layout.svelte（匹配Routify默认规则）
• 清理目录中无效、损坏的Svelte文件，避免干扰路由生成逻辑

验证步骤 #

1. 执行npm run dev启动开发服务器
2. 保存任意路由相关文件，观察终端输出的Routify重建日志
3. 查看.routify/routes.default.js，确认_treeItems包含完整路由树形结构
4. 在页面中打印$meta._treeItems，确认内容非空且符合预期

内容的提问来源于stack exchange，提问作者Shailesh B