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

Question

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.

bazilisok · Accepted Answer · 2019-02-18 09:36:18Z

1

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'],

answered Feb 18, 2019 at 9:36

bazilisok

262 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bazilisok · Accepted Answer · 2019-01-21 08:56:40Z

0

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]

answered Jan 21, 2019 at 8:56

bazilisok

262 bronze badges

3 Comments

Opemipo Bolaji Over a year ago

Hi @bazilisok. Yeah I opened the issue on his GitHub repo and his response made me take another route. Apparently, I still needed the url to carry the intended url, whilst showing the 404 page. Not to redirect to another /404 page entirely. I'm currently using Node.js wildcard as a temp-fix to display a 404 page and still hold on to the intended URL. (Downside is that it redirects to homepage first, but it works).

bazilisok Over a year ago

I understand, but in my example browser keeps intended URL, and shows only 404 page content as you demand. At least in my current project, that I'm working on.

Opemipo Bolaji Over a year ago

Yours too should work :) Though I can't test it as my app is on Heroku and node.js is a safer way to go. But I'll do that soon and give your +1 when tested.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related