nuxtjs spa dynamic routes generate 404 after prod deployment nuxtjs spa dynamic routes generate 404 after prod deployment vue.js vue.js

nuxtjs spa dynamic routes generate 404 after prod deployment


Its because Dynamic routes are ignored by the generate command. You need to configure dynamic route generation by hand. See docs


You need to add fallback: true to nuxt config generate parameter (docs). This redirects missing pages to 404.html which then loads the index.html

// nuxt.config.jsexport default {  generate: {    fallback: true  }}


My solution for this problem was to convert dynamic routes to static routes and move the params argument to query instead.

In my case /product/_id.vue changed to /product.vue and references to params: {id: product_id} changed to query: {id: product_id}.

All n-link paths needed to be updated from :to="'/product/' + product_id" to :to="'/product?id=' + product_id" and I had to add beforeRouteUpdate to the product.vue page component to handle nuxt links that changed the query, but not the page.