使用 Vercel 的 Vue.js 历史模式的服务器配置？

Question

我基本上使用 these steps 设置了一个非常基本的 Vue.js 应用程序。当我将路由器添加到这个项目时，它问我是否要使用历史模式，我说是。

现在我正在尝试为我的部署实施相应的 server configuration changes aka "add[ing] a simple catch-all fallback route to [the] server" but I'm not sure how to do this since I'm using Vercel，据我所知，它正在为我管理服务器。

我似乎可以在 Vercel 中进行一些配置，我在想也许我需要像他们的 firebase.json 示例中那样配置一个 redirect？如果是这样，我的 vercel.json 会像这样吗？

{
"redirects": [
    { "source": "**", "destination": "/index.html" }
]
}

Answer 1

通常，Vercel 会自动检测您的配置并进行设置，以便所有流量都指向您的 index.html 文件。这是他们的一大卖点。

如果您想要更明确的控制，您可以使用您首先链接到的 Vue 文档的 Caveat 部分中显示的配置。只需创建一个重定向到主页的简单组件，然后将 * 指向它。

import NotFound from '../components/NotFound.vue'

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFound }
  ]
})

export default {
  name: 'NotFound',
  template: `<div></div>`,
  mounted() {
    this.$router.push({ path: '/' })
  }
}

Answer 2

根据 Vercel's vercel.json routes upgrade guide、SPA 回退 部分，在您的 vercel.json 文件中使用此：

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

在我的例子中，我也使用了 Vercel Serverless 函数，所以我还需要重写 /api 路由，这里的顺序很重要，必须这样做：

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

Answer 3

没错，Vercel 为您管理服务器，您可以通过 vercel.json 文件配置 Vercel。在那个 vercel.json 文件中，您可以按照您已经假设的那样定义重写规则。显示的正确格式为 here in the docs of vercel.

由于您想添加一条指向路径底部的全部匹配规则，因此将以下内容添加到您的 vercel.json 应该可行：

{
  "rewrites": [{ "source": "/:path*", "destination": "/index.html" }]
}

附加说明：

:path 基本上象征着一个占位符，* 确保它不仅匹配一个子路径深度，而且匹配初始斜杠之后的所有内容。

例如，如果 /:path 之后没有 *，您将匹配 domain.xyz/foo 而不是 domain.xyz/foo/bar。

此外，由于它是一个命名占位符，您可以像这样 "destination": "/index.html/:path".

为目标重复使用匹配的路径

对于像 vue 这样使用浏览器内部路由的前端应用程序来说，这不是必需的，但对于无服务器功能可能会有所帮助。

使用 Vercel 的 Vue.js 历史模式的服务器配置？

Server configuration for Vue.js History Mode with Vercel?

configuration

json

vue.js

vercel

附加说明：