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.

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. 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


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