13

I have one problem on my nuxt.js project.

I create dynamic page like https://samplesite.com/place/{place_id} which place_id dynamic value. (I have around 4,000+ places in my database)

after I run npm run generate and get /dist folder, then I push this folder to amazon EC2.

Everything work well, when I click a like on index page to /place/{place_id} page, website show place information.

But when I push refresh button on web browser, the page /place/{place_id} show 404 not found.

Do you have any solution to fix this problem?

I read on nuxt.js website, they said I need to generate dynamic page but my place is about 4,000 places, I think it's impossible to generate all of place page.

Please tell me what should I do.

3
  • You need to supply that data from server side Nov 22, 2017 at 8:55
  • Can you screenshot the error when you reload 404
    – KitKit
    Nov 30, 2017 at 7:05
  • 1
    Sorry for reopening it, i'm just having the same problem but i'm compiling with command npm run build of Vue CLI. Also, it happens with dinamyc and statics routes, the only one route that i can reload is the index. I uploaded it on an Apache server in Azure. Hope you can help me. May 2, 2019 at 23:09

3 Answers 3

5

Do you have a fix set of dynamic routes?

If you do, you can use function to generate the static site

In 2.13.0, `nust` introduced a `target: static` feature, make sure to 
check [it](https://nuxtjs.org/blog/going-full-static) out.

Do you care about the SEO?

If you do care the SEO, you can use SSR in Nuxt, which is the universal mode. The other choice is the above static site genration

Do you have a SPA site?

If you do, you can use spa mode and refer to the nginx setting showed here

If you don't know the exact dynamic routes, don't care about SEO for dynamic routes, you can combine the static site generation with dynamic routes.

In universal mode, use nuxt generate to generate a static site.

In the generate config, define a custom page for SPA fallback:

export default {
  generate: {
    fallback: "custom_sap_fallbackpage.html"
  }
}

Then in Nginx, define the same fallback page for unknown route, like:

location / {
    try_files $uri /custom_sap_fallbackpage.html;
}

If you set fallback: true, Nuxt will use 404.html as the default fallback page, unless you configure nginx to ignore its own default 404 page, nginx will still show you the default nginx 404 page. I think a custom fallback page is the easiest way to do the static site generation and SPA mixing.

In this approach, static page will be pre-rendered, dynamic routes is treated as unknown route for nginx, which use the fallback SPA page to render.

3

create a .htaccess file and put the below code into it.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
2
  • where to put this file? Dec 7, 2022 at 18:39
  • @RustamRavshanovich in the root where you have the index.html file
    – 26vivek
    Dec 8, 2022 at 5:14
0

npm run generate does not support dynamic routes. Because it doesn't know how to build the {{pageid}}.html.

From nuxt docs:

Dynamic routes are ignored by the generate command.

see: https://nuxtjs.org/api/configuration-generate#routes

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.