如何在本地使用Vite访问Vercel无服务器函数？

核心原因 #

本地运行vercel dev时，Vite开发服务器会优先接管请求路由，导致指向无服务器函数的请求被react-router-dom的前端路由规则捕获，无法正确转发到函数服务。

具体解决方案 #

1. 配置Vite代理转发 #

在Vite配置文件（vite.config.js/vite.config.ts）中添加代理规则，将指向函数的请求转发到Vercel函数服务的端口：

export default defineConfig({
  server: {
    proxy: {
      // 假设你的函数都挂载在/api路径下，可根据实际调整
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
});

2. 拆分启动服务 #

分两个终端分别启动服务，避免端口冲突与路由抢占：

• 第一个终端启动Vercel函数服务：vercel dev --listen 3000（指定端口3000，避免和Vite默认的5173端口冲突）
• 第二个终端启动Vite开发服务器：npm run dev

此时Vite会将/api开头的请求代理到3000端口的Vercel函数服务，react-router-dom仅处理非/api路径的前端路由。

3. 优化vercel.json的rewrites规则 #

确保rewrites规则同时适配生产与本地环境，让API请求优先指向函数：

{
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/api/$1" },
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

4. 排除react-router-dom对API路径的捕获 #

检查react-router-dom的路由配置，确保没有匹配/api路径的规则，比如不要出现：

<Route path="/api/*" element={<SomeComponent />} />

让/api路径完全留给后端函数处理。

内容的提问来源于stack exchange，提问作者Franco Petra