How to prerender a “*” (not-found) page in VUE using spa-prerender plugin

1
votes

I am using spa-prerender-plugin in Vue.js and everything works fine.

However, I would like to pre-render my 404 page as well which in Vue goes like:

{ 
    path: '*', 
    name: 'FourOhFour', 
    component: FourOhFour 
}

Using the plugin, I would like to add the 404 as such:

routes: ['/', '/contact', '*'],

But on trying this, I get:

ERROR in [prerender-spa-plugin] Unable to prerender all routes!

Thank you.

2
vue.jsvuejs2

2 Answers

1
votes

I have found another simple solution without editing .htaccess file. Just insert statement for prerendering to your router:

{
      path: '/404',
      name: 'FourOhFour',
      component: FourOhFour
  },
  {
      path: '*',
      name: 'FourOhFourX',
      component: FourOhFour
  }

and prerender static route:

routes: ['/', '/contact', '/404'],
0
votes

According to https://github.com/chrisvfritz/prerender-spa-plugin/issues/237 this is not possible.

You can edit your router code like

path: '/404', 
name: 'FourOhFour', 
component: FourOhFour

and redirect unresloved routes to 404 page in .htaccess by replacing this line

RewriteRule    (.*) index.html [L]

with

RewriteRule    (.*) 404/index.html [L]