Server configuration for Vue.js History Mode with Vercel?

1
votes

I set up a very basic Vue.js app essentially using these steps. When I added the router to this project, it asked whether I wanted to use History Mode and I said yes.

Now I am trying to implement the corresponding 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 for my deployments and from my understanding it's managing the server for me.

It seems like I'm able to do some configuration in Vercel, and I'm thinking maybe I need to configure a redirect like in their firebase.json example? If so, would my vercel.json just look like this?

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

2 Answers

1
votes

Generally, Vercel automatically detects your configuration and sets it up so that all traffic points at your index.html file. That's kind of their big selling point.

If you want more explicit control, you could use the configuration shown in the Caveat section of the Vue docs you first linked to. Just create a simple component that redirects to the homepage and point * to it.

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

As per Vercel's vercel.json routes upgrade guide, SPA Fallback section, use this on your vercel.json file:

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

In my case I'm also using Vercel Serverless functions, so I also need rewrites for the /api routes, and here the order is important, it must be done this way:

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