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

问题描述

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

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

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

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

解决方法

您不能使用 @nuxtjs/axios 脚本中的 nuxt.config.js，如下所述：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 文件。