Nuxt Static Site 404 Error page not rendering dynamic content correctly-CodePudding

Edit Ok i managed to solve the error template not being loaded. It was an htaccess issue. If I change the ErrorDocument to be /sub/dirs/error.html (note the missing dist folder) it works correcty. However it still doesnt have the full functionality of the dynamic menu and the autocomplete search bar which I really need to work. Any ideas on that?

Im having some issues with my production ready Nuxt App. I have the following in my nuxt.config.js

target: 'static',
  generate: {
    dir: '../dist',
    fallback: 'error.html'
  },

// The error part is solved, dynamic menus continue to be an issue

It correctly generates the error.html file on npm run generate as expected. However it doesn't use the content in layouts/error.vue and the dynamic menus in the header don't load their data. I'm sure its actually loading error.html as i can manually update the HTML (title,text etc via vscode) and it updates. However if i load the error page directly (example.com/error.html) it actually works as expected with the correct error.vue template being rendered as expected.

Once the 404 is thrown it also tries to load the missing route. My setup is

pages
--categories
  --_cat-id
--_page-id

If I hit something like example.com/this-page-doesnt-exist it throws a 404 but still loads the page _page-id and runs all the code. That doesnt seem normal, and I don't really want that. I want it to load the error page and the error page only. Lastly I am using apache/htaccess to handle ErrorDocument. If i remove that it just uses apaches built in 404 which is not an option. Im wondering if there is something in a rewrite rule that may be causing this.

 ErrorDocument 404 /sub/dirs/dist/error.html
 <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /sub/dirs/
    RewriteCond %{REQUEST_URI} !dist/
    RewriteRule ^(.*)$ dist/$1 [L]
</IfModule>

How do I get my error page to render correctly as well as the dynamic content from the menus etc to load? Thanks in advance

CodePudding user response：

I managed to solve the Error page not loading at all by updating my htaccess. New .htaccess - remove the dist from the ErrorDocument.

ErrorDocument 404 /sub/dirs/error.html
 <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /sub/dirs/
    RewriteCond %{REQUEST_URI} !dist/
    RewriteRule ^(.*)$ dist/$1 [L]
</IfModule>

Edit. I have a work around for the dynamic data. It seems that the error page was not being generated completely when you set target:static. All the other html generated pages are complete pages but not the error.html one. I couldn't get the asyncData prop to do anything. So i created an Error component to live inside layouts/error file and then in the mounted hook i accessed the store as per usual

async mounted(){
   await this.$store.dispatch('getStuff')
}

This ended up fetching all the data (that i feel like should have been prefetched when doing npm run generate) and then my dynamic content worked.