I am currently working on a project using Adonis v5 as the backend and Vue 2 as the frontend. I have encountered an issue where, after building the Vue frontend into the public Adonis folder, accessing a specific route directly in the browser results in an E_ROUTE_NOT_FOUND error from Adonis.
It seems that Adonis is attempting to search for the route within its own router instead of the Vue router, despite Adonis being configured to serve static files and the initial frontend page working correctly:
Vue router.js:
Vue.use(VueRouter);
const routes = [
{
path: "/",
redirect: { name: "acceso" },
},
{
path: "/acceso",
name: "acceso",
component: SignupView,
meta: { guestAllow: true },
}];
const router = new VueRouter({
mode: "history",
routes,
});
Adonis routes.ts (with prefix that should not affect this issue):
Route.group(() => {
Route.group(() => {
Route.post("register", "AuthController.register");
Route.post("login", "AuthController.login");
}).prefix("auth");
Route.group(() => {
Route.get("logs", "LogsController.index");
}).middleware("auth:api");
}).prefix("/api");
Adonis static.ts:
import { AssetsConfig } from '@ioc:Adonis/Core/Static'
const staticConfig: AssetsConfig = {
enabled: true,
dotFiles: 'ignore',
etag: true,
lastModified: true,
maxAge: 0,
immutable: false,
}
When entering localhost:3333 in the browser, it redirects to /access successfully
However, upon refreshing the page or manually browsing the same route, the error occurs
If you have any insights or ideas on what could be causing this issue, I would greatly appreciate your input. Thank you for your time.