Proposal: Lazy routing

index.html

@@ -12,6 +12,6 @@
         <strong>We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
       </noscript>
     <div id="app"></div>
-    <script type="module" src="./src/main.ts"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

src/modules/admin/routes.ts

 import { RouteConfig } from "vue-router";
 
-import AdminModule from "./AdminModule.vue";
-import Admin from "./pages/Admin.vue";
+const AdminModule = () => import("./AdminModule.vue");
+const Admin = () => import("./pages/Admin.vue");
 
 export const AdminRoutes: RouteConfig[] = [
   {

src/modules/error/routes.ts

 import { RouteConfig } from "vue-router";
 
-import ErrorModule from "./ErrorModule.vue";
-import NotFound from "./pages/NotFound.vue";
+const ErrorModule = () => import("./ErrorModule.vue");
+const NotFound = () => import("./pages/NotFound.vue");
 
 export const ErrorRoutes: RouteConfig[] = [
   // Not Found (404) Page

src/modules/login/routes.ts

 import { RouteConfig } from "vue-router";
 
-import LoginModule from "./LoginModule.vue";
-import Home from "./pages/Home.vue";
-import Login from "./pages/Login.vue";
+const LoginModule = () => import("./LoginModule.vue");
+const Home = () => import("./pages/Home.vue");
+const Login = () => import("./pages/Login.vue");
 
 export const LoginRoutes: RouteConfig[] = [
   {

src/modules/pid/routes.ts

 import { RouteConfig } from "vue-router";
 
-import PidModule from "./PidModule.vue";
-import Pid from "./pages/Pid.vue";
+const PidModule = () => import("./PidModule.vue");
+const Pid = () => import("./pages/Pid.vue");
 
 export const PidRoutes: RouteConfig[] = [
   {

src/modules/project/routes.ts

 import { RouteConfig } from "vue-router";
 
-import CreateProject from "./pages/CreateProject.vue";
-import ProjectModule from "./ProjectModule.vue";
-import ProjectPage from "./pages/ProjectPage.vue";
-import Quota from "./pages/Quota.vue";
-import Members from "./pages/Members.vue";
-import Settings from "./pages/Settings.vue";
+const CreateProject = () => import("./pages/CreateProject.vue");
+const ProjectModule = () => import("./ProjectModule.vue");
+const ProjectPage = () => import("./pages/ProjectPage.vue");
+const Quota = () => import("./pages/Quota.vue");
+const Members = () => import("./pages/Members.vue");
+const Settings = () => import("./pages/Settings.vue");
 
 import { ResourceRoutes } from "@/modules/resource/routes";
 

src/modules/resource/routes.ts

 import { RouteConfig } from "vue-router";
 
-import CreateResource from "./pages/CreateResource.vue";
-import ResourceModule from "./ResourceModule.vue";
-import ResourcePage from "./pages/ResourcePage.vue";
-import Settings from "./pages/Settings.vue";
+const CreateResource = () => import("./pages/CreateResource.vue");
+const ResourceModule = () => import("./ResourceModule.vue");
+const ResourcePage = () => import("./pages/ResourcePage.vue");
+const Settings = () => import("./pages/Settings.vue");
 
 export const ResourceRoutes: RouteConfig[] = [
   {

src/modules/search/routes.ts

 import { RouteConfig } from "vue-router";
 
-import SearchModule from "./SearchModule.vue";
-import Search from "./pages/Search.vue";
+const SearchModule = () => import("./SearchModule.vue");
+const Search = () => import("./pages/Search.vue");
 
 export const SearchRoutes: RouteConfig[] = [
   {

src/modules/userprofile/routes.ts

 import { RouteConfig } from "vue-router";
 
-import UserProfileModule from "./UserProfileModule.vue";
-import UserProfile from "./pages/UserProfile.vue";
+const UserProfileModule = () => import("./UserProfileModule.vue");
+const UserProfile = () => import("./pages/UserProfile.vue");
 
 export const UserProfileRoutes: RouteConfig[] = [
   {

vite.config.js

@@ -26,7 +26,6 @@ const config = defineConfig({
   ],
 
   server: {
-    base: './',
     hmr: {
       clientPort: 443,
       // Remove when final deploying it
@@ -36,8 +35,6 @@ const config = defineConfig({
     port: 9234,
   },
   
-  base: './',
-  
 });
 
 export default config;