Nuxt.js: can't generate routes

Question

I want to generate both static routes (/contact, /about, ...) and dynamic routes (/project/1, /project/2, ...) for my project, so that when user refreshes the page while visiting any of these routes, the page still works.

But when doing npm run generate I only get Generated route "/" and in /dist folder I see no routes generated.

Nuxt.js version used: 2.14.7

I tried with both universal and spa modes, it works with neither.

In nuxt.config.js I have at the top:

const axios = require('axios')

const dynamicRoutes = async () => {
  const routes = await axios.get('http://my-project.com/wp/wp-json/projects/v1/posts')
    .then(res => res.data.map((project) => `/project/${project.ID}/${project.post_name}`))
    .then(res => res.concat(
      [
        '/about',
        '/contact',
        '/portfolio'
      ]
    ))
  return routes
}

Then in export default {}:

generate: {
  routes: dynamicRoutes
},

Answer 1

router.mode='hash' seems to be incompatible with generate.routes config. When router.mode is set to hash, the Nuxt generator ignores generate.routes and only creates a single route for /, presumably because only the landing page is expected to exist in hash mode (i.e., index.html sets up a router, which handles all routing for the app).

That hash mode is also in conflict with the mode set in router.js, but if you really needed hash routing, you should opt to set it only in router.js to allow generate.routes to be processed.

Also note mode='universal' is equivalent to ssr=true, so the ssr=false config does not make sense alongside that mode. If generating a static site, you want ssr=true so that any asyncData() and fetch() hooks are invoked to populate your static page data. This setting also obviates the need to append /about, /contact, and /portfolio in dynamicRoutes(), as they would already be included in the generated routes.

GitHub PR