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

Conclusion

Add a catch-all route (opens new window).

Issue

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 (opens new window). 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')
  },
  // https://github.com/vuejs-templates/webpack/issues/310#issuecomment-554637551
  {
    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.

reference

• amucunguzi's post (opens new window) for the issue report of how to fix npm run build blank display (opens new window)

---