First App Won't Build In Electron Properly

omgwalt

I’ve just finished my first (very simple) Quasar SPA app, and I’ve tested it in Electron dev mode. It works well there on both my PC and on my Mac.

When I build it for production, though, my home page opens just fine, but my other pages are all blank. Even if I am on the home page and I try to access the home page via the navigation, the page goes blank.

Dev Tools for these blank pages shows:

<html>
<head></head>
<body></body>
</html>

I can’t think of anything about these blank pages that could cause the problem because they’re not doing much of anything from a JS perspective. They mainly just contain HTML content.

I see in Dev Tools under Sources that there are three folders: css, fonts, and JS, along with my index.html file.

But when I try to navigate to any of the pages that end up displaying blank pages, the JS folder disappears in the Sources list, leaving only the css and font folders.

Again, I get the same result when I build with either my Mac and my PC.

I’ve tried deleting the src-electron folder entirely and starting again, but that doesn’t help. And I can’t find anything via Google that gives me any good clues.

It’s baffling to me that the app would work fine on the simulator but would then fail so completely when building the actual app. And I don’t really know what to do next.

How can I resolve this?

omgwalt

Here is my routes.js file:

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') },
      { path: '/hosts', component: () => import('pages/Hosts.vue') },
      { path: '/privacy', component: () => import('pages/Privacy.vue') },
      { path: '/terms', component: () => import('pages/Terms.vue') },
      { path: '/contact', component: () => import('pages/Contact.vue') },
      { path: '/livestream', component: () => import('pages/Livestream.vue') },
      { path: '/youtube', component: () => import('pages/YouTube.vue') },
      { path: '/book', component: () => import('pages/Book.vue') },
      { path: '/zoom', component: () => import('pages/Zoom.vue') },
      { path: '/grass', component: () => import('pages/TheGrassIsGreener.vue') },
      { path: '/loatoday', component: () => import('pages/LOAToday.vue') }
    ]
  }
]

// Always leave this as last one
routes.push({
  path: '*',
  component: () => import('pages/Error404.vue')
})

export default routes