I am working on a webapp and trying to build a “light” version of it without all the features that is going to be served on a different address.

I don’t want to fork the project and have to maintain 2 codebases.

For the most part just commenting the routes I want excluded for the “light” build gives me the expected result, I just have to hide the links to these routes on the client side which can be done conditionally with an env variable.

However I don’t know how to filter the routes I don’t want at build time. I tried with an env variable without success:

import App from "@/App.vue";

const routes = [
  {
    path: "/",
    name: "main",
    component: App
  },
  {
    path: "/login",
    name: "login",
    component: () => import("@/routes/Login.vue")
  },
  {
    path: "/sign-up",
    name: "sign-up",
    component: () => import("@/routes/CreateAccount.vue"),
  },
  {
    path: "/settings",
    name: "settings",
    component: () => import("@/routes/Settings.vue"),
  },
  ...
]

const filteredRoutes = process.env.VITE_BUILD_MODE === 'light' ? routes.filter(route => route.path !== '/settings') : routes;

const router = createRouter({
  history: createWebHistory(),
  routes: filteredRoutes,
});

export default router;

This bundles the whole project and when served doesn’t allow to navigate to the filtered routes but the code is still present in the bundle.

Is there a way to exclude those routes at build time ?