如何使用serverMiddleware向Nuxt站点地图添加动态路由？

Question

我的 Nuxt SSR 应用程序的

/serverMiddleware

目录中有一个正常运行的 Express API。它有一个端点

/routes

，它返回我想要添加到站点地图中的所有路线的数组。我还做了一个

console.log("Backend online")

来了解它何时完成构建并正在运行。

我正在尝试使用

@nuxtjs/sitemap

模块查询我的 API，以将这些路线添加到我的站点地图中，但我不知道该怎么做。我目前的做法是这样的：

// nuxt.config.js

import axios from "axios"

export default {
  modules: [
    "@nuxtjs/sitemap"
  ],

  serverMiddleware: [
    { path: "/api", handler: "./serverMiddleware/index" }
  ],

  sitemap: {
    async routes () {
      const data = await axios.get("http://localhost:3000/api/routes")
        .then(r => r.data)
        .catch(e => console.error("Sitemap error:", e.response))
      return data
    }
  }
}

当我运行

nuxt start

时，我得到以下输出：

> nuxt start


   ╭─────────────────────────────────────────╮
   │                                         │
   │   Nuxt @ v2.15.8                        │
   │                                         │
   │   ▸ Environment: production             │
   │   ▸ Rendering:   server-side            │
   │   ▸ Target:      server                 │
   │                                         │
   │   Memory usage: 53.2 MB (RSS: 112 MB)   │
   │                                         │
   │   Listening: http://localhost:3000/     │
   │                                         │
   ╰─────────────────────────────────────────╯


 ERROR  Sitemap error: {
  status: 404,
  statusText: 'Not Found',
  headers: {
    'content-type': 'text/html; charset=utf-8',
    'accept-ranges': 'none',
    'content-length': '26942',
    vary: 'Accept-Encoding',
    date: 'Wed, 26 Jan 2022 21:25:02 GMT',
    connection: 'close'
  },
  config: {
    url: 'http://localhost:3000/api/routes',
    method: 'get',
    headers: {
      Accept: 'application/json, text/plain, */*',
      'User-Agent': 'axios/0.21.4'
    },
  ...
 }

Backend online

由于 404 错误后打印了

Backend online

消息，我认为服务器中间件仅在站点地图尝试调用它之后才启动。当我在浏览器中从 axios 请求打开完全相同的 URL 时（

http://localhost:3000/api/routes

），我从 API 中获得了正确的数据数组，而不是 404，这一事实进一步证明了这一点。

所以我认为我的问题是如何让站点地图路由功能等到 serverMiddleware 运行以便我可以查询它？

Answer 1

你不能那样做，因为站点地图模块必须在 Nuxt 应用程序初始化之前生成其路由。

根据设计，您必须直接从

nuxt.config.js

文件中的嵌入函数初始化路线。该函数可以使用与您的中间件相同的代码。

作为替代方案，您可以尝试使用

filter

选项，如下所示：

sitemap: {
  async filter ({ routes }) {

    const data = await axios.get("http://localhost:3000/api/routes")
      .then(r => r.data)
      .catch(e => console.error("Sitemap error:", e.response))

    routes.push(...routes)
  }
}

查看有关过滤器的更多信息https://sitemap.nuxtjs.org/usage/sitemap-options#filter-Optional---function

Answer 2

您可以将

regex

用作

path

，如下所示：

{
  path: /^\/api\/\d$/i,
  handler: './serverMiddleware/index'
}