Question

我一直在尝试将 Nuxt 应用部署到 Vercel。该应用程序在技术上进行部署，但只会呈现主页。如果我尝试点击需要 API 请求的链接，该页面上的所有 API 请求都会返回 404 错误。但是，同一个应用程序在 Localhost 上的所有页面上都可以正常运行。

我不确定导致此问题的部署有什么问题。这是我目前拥有的 vercel.json

{
    "alias": "corey-lanier-blog",
    "name": "blog",
    "env": {
      "PORT": "4000",
      "SECRET": "@secret",
      "MONGODB_URI": "@mongodb_uri"
    },
    "version": 2,
    "builds": [
      {
        "src": "nuxt.config.js",
        "use": "@nuxtjs/vercel-builder",
        "config": {}
      }
    ],
    "routes": [
      {
        "src": "/api/posts/(.+)",
        "dest": "/api/posts.js"
      },
      {
        "src": "/api/users/(.+)",
        "dest": "/api/users.js"
      },
      {
        "src": "/api/comments/(.+)",
        "dest": "/api/comments.js"
      },
      {
        "src": "/(.*)",
        "dest": "/"
      }
    ]
  }

除非问题是我在同一个部署中部署了后端和前端，并且 Nuxt 不允许后续 API 请求通过。那可能吗？如果是这样，那么为什么它能够为首页渲染渲染初始 API 请求，而不是在点击时渲染后续请求？

Answer 1

Nuxt 在 Vercel 上部署会覆盖您的 vercel.json 中列出的路由。在 Nuxt 或 vercel.json 中没有明确的方法可以防止这种情况发生。为了解决这个问题，您需要将代码库从一个项目/部署中的全栈拆分，并重新单独部署前端/后端，并将您在 Nuxt 中的 API 路由指向后端的 URL。（如果您还没有在后端正确配置 CORS，您可能还必须确保已在后端正确配置，以便您可以接受来自前端的请求）

Vercel 部署后无法在非根页面上运行 API

1 个答案: