I recently ran my first npm run build command to deploy my Vue3 application on a live server for testing.
After uploading the files to my VPS, I encountered an issue where the server only recognizes route paths when navigated through clicks.
Reloading the page or directly entering a URL results in a browser error. I tried implementing the code from into my .htaccess file with Apache on Centos 7/CWP, but the problem persists. The difference now is that instead of throwing an error, it just stays stuck on the index.html page without displaying any content.
I'm struggling to identify what might be causing this issue.
Below is the snippet of code showing how I have implemented Vue Router 4 in my project:
In my main.js file:
import { createRouter, createWebHistory } from "vue-router"
import Page from "./views/Page.vue"
import Content from "./views/Content.vue"
import BaseSection from "./components/BaseSection.vue"
//ROUTER
const router = createRouter({
history: createWebHistory(),
routes: [{
path: "/",
name: "Home",
component: Page,
meta: {
title: 'Home'
}
},
{
path: "/docs/1.0/:title",
component: Content,
name: "docs"
}
],
scrollBehavior(to) {
if (to.hash) {
return {
el: to.hash,
behavior: 'smooth',
}
}
}
});
app.use(router);
If you have any insights or suggestions on how to resolve this issue, please let me know. Your help would be greatly appreciated.
Thank you.
Sincerely, T.