Nuxt.js：无法生成路由

Posted 2023-02-22

【中文标题】Nuxt.js：无法生成路由

【英文标题】：Nuxt.js: can't generate routes

【发布时间】：2021-03-12 15:06:51

【问题描述】：

我想为我的项目生成静态路由（/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
,

【问题讨论】：

我在自己的机器上克隆了这个项目，它在 dist 文件夹中生成了路由

@BoussadjraBrahim 知道为什么 Nuxt 在我的机器上运行 npm run generate 时无法生成任何路由吗？

能否在运行命令后显示截图？

我使用此类问题在 nuxt.config.js 中的 nuxt.js 上生成站点地图添加到模块“@nuxtjs/sitemap”，然后添加站点地图站点地图： routes () return axios.post( process.env.APP_URL+'/sitemap') .then( res => res.data.map(link => link) ) ，我认为你可以使用相同的行为

@drake035 你必须删除 nuxt 路由器模块并修复文件结构 - gist.github.com/MexsonFernandes/…。我已经克隆并检查了......它的工作完美无缺。

【参考方案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'
      ]
    ]
  

【讨论】：

谢谢，但恐怕结果相同。

你能记录下：来自 axios 的响应，创建一个返回的数组，记录它，然后返回数组并显示使用 Brahim 所说的目录结构

Axios 回复：["/project/14/test", "/project/16/16", "/project/17/17"。关于/pages目录结构：我在这个目录的根目录下有about.vue、contact.vue等，还有它的根目录我有一个/projects文件夹，里面有一个_id.vue文件和一个/slug目录。

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

GitHub PR

【参考方案3】：

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

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

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

【讨论】：

谢谢 :) 但是@tony19 稍早的回答已经解决了我的问题（顺便说一句，target: 'static' 似乎不需要）