Back to contents of Vue

How to fix blank display of vue application which is created by npm run build and deployed.

Assumption of this article

  • using Vue router
  • using history mode of Vue router
  • do npm run build
  • deploy created files to server
  • blank screen


Add a catch-all route.


A vue application get blank page after build and deploy despite there are no problem with the local server (npm run serve) as follows:

Watch it by DevTools, then it figure out that HTML headers seems normal, just v-content seems empty.

So, I've looking for the solution and found this. In accordance with that suggestion, I've add a catch-all route on the src/router/index.js as follows.


const routes = [
    path: '/',
    name: 'Home',
    component: Home
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    path: '*',
    name: 'catchAll',
    component: Home

Then do npm run build and deploy created files on the server again, the display get buck as normal.

The v-content also seems normal.


Last Updated: 2/20/2020, 9:43:30 AM