Vue site doesn't load root route

Heylo~

I just deployed a preview of a Vue 3 + Router site on here . This link is a subpage link and it works fine. However the home page doesn’t load on deployment. The home page works on local.

There’s no error in console. I guess there might be something missing for deployment?
I added _redirects but it’s not the case.

The code of homepage is like

// App.vue

<template>
  <RouterView />
  <BackButton />
  <HomeButton />
</template>

The router file is like

// in the router file

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: import('../views/Home.vue')
    },

What could go wrong? Hope someone can give a hint please ~

Cheers!

Hey @ian2netlify8

When you say “The home page works on local”, is that when running yarn serve? If you run yarn build and serve dist, does the home page work?

A just made a little test project (created with Vue CLI) and when I run yarn serve everything works fine. But when I run yarn build then serve dist, neither of the routes work. I see no error in the console, and the content of the route is not rendered.

SILLY ME!

// > in the router file

// this line should be a function that return a vue 
component: () => import('../views/Home.vue') component