Working on a project in Vue3 (v3.2.25) and Electron (v16.0.7), I have integrated vue-router4 to handle navigation within the application. During development, everything works perfectly as expected. However, when the application is built for production, the electron app fails to render components related to routers such as <router-view/>.
The initial component loaded is my App.vue file:
<script setup lang="ts">
// This starter template uses Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
</script>
<template>
<h1>bpe</h1>
<router-view />
</template>
While the bpe text gets rendered, the router does not.
Here is an overview of my router setup:
import {
createRouter,
createWebHashHistory,
createWebHistory,
Router,
RouteRecordRaw,
} from "vue-router";
const routes: RouteRecordRaw[] = [
{
path: "/",
component: () => import("../pages/Login.vue"),
},
{
path: "/dashboard/",
component: () => import("../pages/dashboard/Home.vue"),
},
];
const router: Router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
In my main.ts file for Vue, I set up the application as follows:
import { createApp } from "vue";
import App from "./App.vue";
import "./assets/tailwind.css";
import router from "./middleware/router";
const app = createApp(App);
app.use(router);
app.mount("#app");
And finally, here is a snippet from my electron.js file:
const path = require("path");
...
// additional code specific to electron.js
...
If anyone has insights or suggestions on how to resolve this issue, your help would be greatly appreciated!