NuxtJS 静态生成日期-fns "locale must contain localize property" + nuxt-i18n

Question

我最近将 @nuxtjs/date-fns 模块添加到我的应用程序中。我的目标是将不同语言的日期格式化为人类可读的格式，例如“2042 年 7 月 13 日，星期五”。

对于语言翻译，我正在使用 @nuxtjs/i18n 模块。

这是我尝试静态生成时有问题的代码块：

{{
   $dateFns.format($dateFns.addDays(new Date(startDate), 30), "PP", {
     locale: $i18n.locale
   })
}}

我总是从 date-fns 模块中得到以下错误：

 WARN  [date-fns] locale 'en' not found.                                            09:00:32
 ERROR   /en/offices/ecos-pfaffikon-sz                                              09:00:32
RangeError: locale must contain localize property
    at Object.format (/home/gno/open2work/nuxt/node_modules/date-fns/format/index.js:382:11)
    at Object.dateObj.format (node_modules/.cache/nuxt/date-fns.js:31:0)
    at a.render (components/TabFix.vue?b9bd:1:0)
    at a.t._render (/home/gno/open2work/nuxt/node_modules/vue/dist/vue.runtime.common.prod.js:6:35346)
    at /home/gno/open2work/nuxt/node_modules/vue-server-renderer/build.prod.js:1:70916
    at runNextTicks (node:internal/process/task_queues:58:5)
    at listOnTimeout (node:internal/timers:525:9)
    at processTimers (node:internal/timers:499:7)

我已经尝试将代码块包装到 <client-only></client-only> 中，但没有成功。

当我处于开发模式时一切正常。我觉得可能是生成过程的问题，客户端和服务端肯定有冲突。

还有我的nuxt.config.js

 dateFns: {
    methods: ["format", "differenceInMinutes", "addDays"],
    locales: ["en", "de", "fr"],
    fallbackLocale: "en"
  },
"nuxt-i18n",
      {
        seo: false,
        detectBrowserLanguage: {
          useCookie: true,
          cookieKey: "i18n_redirected",
          onlyOnRoot: true
        },
        langDir: "lang/",
        lazy: true,
        locales: [
          {
            code: "en",
            iso: "en-US",
            file: "en.js"
          },
          {
            code: "de",
            iso: "de-DE",
            file: "de.js"
          },
          {
            code: "fr",
            iso: "fr-FR",
            file: "fr.js"
          }
        ],
        vueI18n: {
          fallbackLocale: "de"
        },
        defaultLocale: "de",
        strategy: "prefix",
        parsePages: false
}

Answer 1

如错误中所述，en 不是可用的语言环境。

有关此处文档的更多信息：https://date-fns.org/v2.22.1/docs/I18n
date-fns 多使用 enUS 或 enGB 语言环境格式。

如果将它导入到组件中，它会使用 en-GB 格式，我知道更糟糕的是..

NuxtJS 静态生成日期-fns "locale must contain localize property" + nuxt-i18n

NuxtJS static generation date-fns "locale must contain localize property" + nuxt-i18n

nuxt.js

date-fns

nuxt-i18n