为什么 Nuxt 不能自动生成我的 static 路由？

Question

All I see in /dist folder upon doing npm run generate is one 200.html and a _nuxt folder with a bunch of other files: no index.html and no /about folder for my about route.

So Nuxt didn't generate my static routes and the app doesn't work.

What am I missing here?

router.js :

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        component: () => import(/* webpackChunkName: "index" */ '~/pages/index.vue').then(m => m.default || m)
      },
      {
        path: '/about',
        component: () => import(/* webpackChunkName: "about" */ '~/pages/about.vue').then(m => m.default || m)
      }
    ]
  })
}

nuxt.config.js :

export default {
  target: 'static',
  ssr: true,
  components: true,
  ...
}

EDIT: if I delete router.js , hence letting Nuxt.js do its automatic routing thing, then my static routes do get generated, I've just discovered. Why does it fail in the presence of router.js ?

Answer 1

As explained in the docs here: https://nuxtjs.org/docs/2.x/features/file-system-routing#extending-the-router

If you do pass a router.js file to your Nuxt, it will overwrite your configuration due to the @nuxtjs/router module. You need to choose between the 2.

I'd still recommend using the Nuxt way and handle it with your files/folders and let the crawler do it's job.

Otherwise, you could maybe use the keepDefaultRouter option of the router module.

For my usage, router-extras-module is good enough in terms of features: if you want to make some aliases or renaming. I do recommend it !