Nuxt.js：无法生成路由

Question

我想为我的项目生成静态路由（/contact、/about、...）和动态路由（/project/1、/project/2,...），这样当用户刷新页面时访问这些路线中的任何一条，页面仍然有效。

但是在执行npm run generate 时，我只得到Generated route "/" 并且在/dist 文件夹中我看不到任何路由生成。

使用的 Nuxt.js 版本：2.14.7

我尝试了universal 和spa 两种模式，但两者都不适用。

在 nuxt.config.js 我在顶部：

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
}

然后在export default {}:

generate: {
  routes: dynamicRoutes
},

Answer 1

你能试试这个代码吗？

generate: {
 async routes(){
   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}`))
    return [...routes,
      [
        '/about',
        '/contact',
        '/portfolio'
      ]
    ]
  }
}

Answer 2

router.mode='hash' 似乎与generate.routes 配置不兼容。当router.mode设置为hash时，Nuxt生成器ignores generate.routes and only creates a single route for /，大概是因为hash模式下只期望存在着陆页（即index.html设置了一个路由，处理所有路由应用程序）。

那个hash模式也和the mode set in router.js冲突，但是如果你真的需要hash路由，你应该选择只在router.js中设置，让generate.routes被处理。

还要注意mode='universal' 等价于ssr=true，因此ssr=false config 在该模式下没有意义。如果生成静态站点，您需要ssr=true，以便调用任何asyncData() 和fetch() 挂钩来填充您的静态页面数据。此设置还消除了附加 /about, /contact, and /portfolio in dynamicRoutes() 的需要，因为它们已经包含在生成的路由中。

GitHub PR

Answer 3

首先，您不必在配置中添加mode: 'universal'。添加target: 'static' 以简化它。阅读更多 - https://nuxtjs.org/docs/2.x/features/deployment-targets/。使用ssr: true，您将获得带有https://stackoverflow.com/a/65208463/8153537 中提到的相关钩子的完整静态模式网站。

接下来，您可以删除 @nuxt/router 模块。检查我的要点 - https://gist.github.com/MexsonFernandes/d04495c86b115bbe29f26b36b0b35d2d。 Nuxt 将根据文件夹结构生成所有必需的路由。所以不需要额外的配置。

查看项目页面路线的要点 - https://gist.github.com/MexsonFernandes/d04495c86b115bbe29f26b36b0b35d2d#gistcomment-3555332。