Currently, I am working on a basic web page that has an index '/' and a 404 page to handle errors at '/404'.
In my express app setup, I have the following configuration:
// Entry Point
app.use("/", express.static(resolve(__dirname, "client/dist")));
Furthermore, this is how I have defined my router in Vue:
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/404',
name: 'PageNotFound',
component: () => import('../components/modules/PageNotFound'),
},
{
path: '*',
redirect: '/404',
},
];
const router = new VueRouter({
mode: 'history',
base: '/',
routes,
});
When I access my client-side application and navigate to a non-existent route like '/13eo31be', it correctly redirects me to '/404' using Vue's router. However, when I build my Vue app and run it through my server (which mimics how websites operate), here are the issues I encounter:
- '/' => '/'
- '/404' => cannot get /404 - should lead to '/404'
- '/2323f2f' => cannot get /2323f2f - should also redirect to '/404'
I am seeking advice on how to configure express to pass the redirection responsibilities to the Vue Router seamlessly.