如何在 Vue Nuxt 应用程序中正确设置动态 sitemap.xml 路由？

Question

我正在使用@nuxtjs/sitemap 在我的 Nuxt 应用程序中自动生成站点地图，但它不能很好地生成内部路由，我想根据实际存在的帖子动态定义用户帖子的路由。考虑一下：

• https://example.com/posts/0
• https://example.com/posts/1
• https://example.com/posts/3

我希望能够自动生成它们并更新站点地图，而不是在我的站点地图中提供 0,1 和 3 值。

我似乎无法从 nuxt.config.js 文件中调用 nuxt 的 axios 插件，而且我不明白如何完成这项任务，希望得到任何指导。

Answer 1

您不能使用nuxt.config.js 脚本中的@nuxtjs/axios，如下所述：https://github.com/nuxt-community/axios-module/issues/242#issuecomment-544923463

因此，您必须直接使用axios 进行XHR 调用并为您的sitemap 配置生成动态路由，如下所示：

const axios = require('axios');

{
  // ...
  sitemap: {
    routes: async () => {
      const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts')
      return data.map((user) => `/posts/${post.id}`);
    }
  }
}

请参阅文档中的示例：https://sitemap.nuxtjs.org/usage/sitemap-options#from-a-function-which-returns-a-promise

在每次调用您的https://example.com/sitemap.xml 时，站点地图模块将执行“路由”功能并动态更新您的sitemap.xml 文件。