北京
你刚在Lovable上完成一个项目，兴奋地连接Vercel，点击部署，看着构建日志一路绿灯。然后打开链接——404: NOT_FOUND。那种挫败感，经历过的人都懂。
更崩溃的是，搜遍全网都在说同一句话："加个vercel.json重写规则就行。"你照做了，重新部署，刷新页面，还是404。再三检查文件位置，依旧报错。三小时就这样没了。
这篇文章就是我希望在第一小时就能搜到的答案。
问题的根源在于Lovable最近将整个技术栈切换到了TanStack Start，部署逻辑完全改变。以前的老办法之所以管用，是因为早期的Lovable应用是纯粹的SPA——纯静态文件，Vercel直接把index.html塞给所有路由，剩下的交给React处理。
但现在打开任意新项目的vite.config.ts，你会看到类似这样的配置：
// @lovable.dev/vite-tanstack-config already includes the following — do NOT add them manually:
// - tanstackStart, viteReact, tailwindcss, tsConfigPaths, cloudflare (build-only) ...
import { defineConfig } from "@lovable.dev/vite-tanstack-config";
export default defineConfig();
注意注释里的tanstackStart。这不是简单的路由封装，而是完整的全栈SSR框架，带服务端函数、数据加载器、真正的服务端渲染——更接近Next.js，而非普通Vite应用。
所以当Vercel收到/dashboard请求时，它会去找一个叫dashboard的物理文件。找不到，也不知道你的应用要在服务端处理路由，直接返回404。那个bom1::开头的错误ID就是线索——说明请求在到达你的应用之前就被Vercel拦截了。
真正的解法是Nitro。这是一个通用部署适配器，专门教Vercel怎么运行TanStack Start应用。
具体操作三步走：
第一步，安装依赖：
npm install nitro
第二步，修改vite.config.ts。在vite选项里追加Nitro插件：
import { defineConfig } from "@lovable.dev/vite-tanstack-config";
import { nitro } from "nitro/vite";
export default defineConfig({
vite: {
plugins: [
nitro({
preset: "vercel",
}),
],
},
});
preset: "vercel"让Nitro按Vercel预期的格式输出构建产物。
第三步，删掉vercel.json。如果之前加过，现在可以移除。Nitro会接管相关配置，两者共存反而可能冲突。
重新部署，404应该就消失了。如果还在报错，检查构建日志里有没有Nitro相关的输出，确认preset是否正确识别。
这个坑的本质是框架演进速度超过了社区文档的更新速度。TanStack Start作为相对新的全栈方案，很多部署平台的"默认常识"还没跟上。Nitro的存在就是为了抹平这种差距——用一套适配层屏蔽不同平台的差异，让开发者专注于业务代码而非基础设施拼图。
对于用Lovable这类工具快速验证想法的开发者来说，这种隐形复杂度尤其恼人。工具链的抽象层级越高，底层出问题时的调试成本就越高。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
