Vercel 的 Vue.js 历史模式的服务器配置？答案

【问题标题】：Server configuration for Vue.js History Mode with Vercel?Vercel 的 Vue.js 历史模式的服务器配置？
【发布时间】：2020-09-21 01:50:26
【问题描述】：

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

现在我正在尝试实现相应的 server configuration changes aka “添加 [ing] 到 [the] 服务器的简单的包罗万象的后备路由”，但我不确定如何执行此操作，因为我正在使用 @987654323 @ 用于我的部署，据我了解，它正在为我管理服务器。

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

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

【问题讨论】：

标签： json vue.js configuration vercel

【解决方案1】：

根据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" }
  ]
}

【讨论】：

【解决方案2】：

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

【讨论】：