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

Question

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

现在我正在尝试实现相应的服务器配置更改，即“添加到服务器的简单包罗万象的后备路由”，但我不确定如何执行此操作，因为我正在使用Vercel进行部署并且据我了解，它正在为我管理服务器。

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

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

Answer 1

根据Vercel 的 vercel.json 路由升级指南SPA 后备部分，在您的 vercel.json 文件上使用此内容：

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

就我而言，我还使用 Vercel Serverless 函数，因此我还需要重写 /api 路由，这里的顺序很重要，必须这样做：

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

Answer 2

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

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

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: '/' })
  }
}