7

I'm making a project using vite which uses vue-router@4. It works all fine but when viewing the links on vercel or netlify, i get a 404 error. Here is my index.js file (setup for router)

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
import Admin from "../views/Admin.vue";
import List from "../views/List.vue";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      component: Home,
    },
    {
      path: "/adminpanel",
      component: Admin,
    },
    {
      path: "/list",
      component: List
    }
  ],
});

export default router;

Am I doing anything obviously wrong? Thanks for your help.

PaddyCooper08
  • 111
  • 2
  • 6
  • 1
    Maybe these answers can help: [1](https://stackoverflow.com/questions/66667636/vite-js-react-build-not-redirecting-on-netlify-and-vercel/66686684#66686684) [2](https://stackoverflow.com/questions/64815012/why-does-react-router-not-works-at-vercel) [3](https://stackoverflow.com/questions/70249976/vercel-vite-404-not-found) – Daniel May 16 '22 at 00:34

1 Answers1

29

Add a rewrites configuration to allow you to send users to different URLs without modifying the visible URL.

Create a file called

vercel.json

at the root folder

then add

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

Source: https://vercel.com/docs/configuration#project/rewrites

Felix Runye
  • 2,135
  • 1
  • 20
  • 20
  • If necessary add CORS to `vercel.json` as that file might impact CORS and hinder getting data from your api. see : https://vercel.com/guides/how-to-enable-cors#enabling-cors-using-vercel.json – thiebo Mar 13 '23 at 06:18