你刚在Lovable上做完一个项目，满心期待地连上Vercel，点击部署。构建日志一路绿灯，你打开新链接——404: NOT_FOUND。你搜遍全网，所有人都在说"加个vercel.json重写规则就行"。你照做了，重新部署，刷新页面，还是404。再加一遍，三重检查文件位置，依旧报错。三小时后，你开始怀疑人生。

这篇文章就是我希望自己在第一小时就能找到的答案。

打开网易新闻 查看精彩图片

问题的根源在于Lovable最近把整个技术栈切到了TanStack Start，这彻底改变了部署逻辑。以前那个重写技巧之所以管用，是因为旧版Lovable应用是纯SPA——只有静态文件，Vercel对每个路由都返回index.html，React自己接管后续路由。简单直接。

但现在打开任意新版Lovable项目的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就是关键。TanStack Start是一个全栈SSR框架，不只是React上加个路由。它有服务端函数、数据加载器、真正的服务端渲染，更接近Next.js而非普通Vite应用。

所以当Vercel收到/dashboard请求时，它会去找一个叫dashboard的文件。找不到，又不知道你的应用在服务端处理路由，直接抛404完事。

真正的解决方案是Nitro，一个通用部署适配器，告诉Vercel如何运行TanStack Start应用。

具体操作三步走。第一步，安装Nitro：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期望的格式输出构建产物，不用猜、不用重写规则、不用hack。

第三步，删掉vercel.json。如果之前加过，现在清理掉。Nitro已经接管了这些工作，两者并存反而会冲突。

重新部署，刷新页面，应用终于正常加载。三小时的折腾，核心就一句话：技术栈变了，部署方式也得跟着变。