如何使用 nuxt 和 nuxt-i18n 生成本地化动态路由？

Question

我正在尝试让 nuxt 生成本地化的动态路由。我使用 nuxt-i18n 来翻译每条路线。

这是我的 nuxt-i18n 配置：

['nuxt-i18n', {
  lazy: true,
  locales: [
    {
      name: 'French',
      code: 'fr',
      iso: 'fr-ch',
      file: 'fr.json'
    },
    {
      name: 'German',
      code: 'de',
      iso: 'de-ch',
      file: 'de.json'
    },
    {
      name: 'Italian',
      code: 'it',
      iso: 'it-ch',
      file: 'it.json'
    },
  ],
  langDir: 'lang/',
  defaultLocale: 'fr',
  parsePages: false,
  pages: {
    'advice/_uid': {
      fr: '/conseil/:uid',
      de: '/ratschlag/:uid',
      it: '/consiglio/:uid',
    },
  }
}]

正如文档中所写：

生成命令 (yarn generate) 会忽略动态路由。Nuxt 不知道这些路由是什么，因此无法生成它们。

所以我试图调整他们的例子并使用我的无头 CMS 的 Api 来重建所有路线，但不幸的是，由于某种原因，nuxt 没有生成它们。我尝试使用文件结构（即/advice/_uid.vue）而不是本地化路由，希望 nuxt-i18n 会为我解决这个问题，但那方面也没有运气。

这是我的 nuxt.config.js：

import Prismic from 'prismic-javascript'
const prismicEndpoint = 'https://some-repository.cdn.prismic.io/api/v2'

const advices = () =>
  Prismic.getApi(prismicEndpoint)
  .then(api =>
    api.query(Prismic.Predicates.at('document.type', 'advice'), {
      pageSize: 100,
    })
  )
  .then(res => {
    return [
      ...res.results.map(advice => `/conseil/${advice.uid}`),
    ]
  })

// Some more code...

export default {
  // Some more code...

  generate: {
    fallback: '404.html',
    advices
  }
}

我运行时没有错误npm run generate，尽管它不会生成任何这些路由。在我使用 nuxt-i18n 本地化我的路线之前，它曾经工作得很好

有没有办法让 nuxt 或 nuxt-i18n 生成本地化的动态路由？

谢谢你的帮助！

Answer 1

你确定这里没有写错吗？

generate: {
  fallback: '404.html',
  advices
}

你的函数应该有routes作为它的键，所以它应该是：

generate: {
  fallback: '404.html',
  routes: advices
}