Vue + Firebase hosting page shows blank after user logged in

Question

I deployed a Vue2 project to Firebase hosting server, it requires user to login to see the other pages. Currently, the site only shows login page, if the user is authenticated, it will redirect to next page, but it shows as blank.

Here is the firebase.json looks like

{
"database": {
    "rules": "database.rules.json"
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  },
  "emulators": {
    "auth": {
      "port": 9000
    },
    "functions": {
      "port": 9001
    },
    "firestore": {
      "port": 9002
    },
    "database": {
      "port": 9003
    },
    "hosting": {
      "port": 9004
    },
    "pubsub": {
      "port": 9005
    },
    "storage": {
      "port": 9006
    },
    "ui": {
      "enabled": true,
      "port": 9007
    }
  },
  "remoteconfig": {},
  "functions": {
    "source": "functions"
  }
}

It did deployed to the server, but it only shows the login page. All the other pages is not showing after login (redirect from login page). It did change the path (url) correctly tho.

Here is my route.js

import Login from './components/Login'
import Home from './components/Home'
import Dashboard from './views/Dashboard'
import Recipe from './views/Recipe'
import Permissions from './views/Permissions'
import Report from './views/Report'

export const routes = [{
      path: '*',
      redirect: '/login'
   },{
      path: '/login',
      name: 'login',
      component: Login
   },{
      path: '/home',
      name: 'home',
      redirect: '/dashboard',
      component: Home,
      children:[{
         path: '/dashboard',
         name: 'dashboard',
         component: Dashboard
      },{
         path:'/recipe',
         name:'recipe',
         component: Recipe
      },{
         path:'/permissions',
         name:'permissions',
         component: Permissions
      },{
         path:'/report',
         name:'report',
         component: Report
      }],
      meta: {
         requiresAuth: true
      }
   }
];

And main.js

...
const router = new VueRouter({
  mode: 'history',
  routes
});

router.beforeEach((to, from, next) => {
  const currentUser = firebase.auth().currentUser;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  if (requiresAuth && !currentUser) next('login');
  else if (!requiresAuth && currentUser) next('home');
  else next();
});

let app = '';
firebase.auth().onAuthStateChanged(user => {
  store.commit('authStateChanged', user);
  if(!app){
    app = new Vue({
      router,
      store,
      firebase,
      i18n,
      render: h => h(App)
    }).$mount('#app')
  }
});

And the login vue

...
<script>
  import {auth} from '../fire';
  import Vue from 'vue';

  export default {
    name: 'Login',
    methods: {
      async onSubmit(event) {
        event.preventDefault();
        auth.signInWithEmailAndPassword(this.form.email, this.form.password)
        .then(() => {
          this.$router.replace('dashboard');
        }).catch((error) => {
          this.msg.err = error.code.replace('auth/','').split('-').join(' ');
        });
      }
    }
  }
</script>

I deployed the app by running npm run build then firebase deploy --only hosting

Is there anything wrong with the code?

Here is the folder structure looks like

hq
    dist
        css
        img
        js
        index.html
        ...
    public
        img
        index.html
        ...
    src
        assets
        components
        locales
        views
        ...
    firebase.json
    pacjage.json
    ...

Thanks.

Answer 1

Found out is one of the library has issue after built, removed it and problem solved.