数字和日期的本地化在 Nuxt3 + VueI18n 中不起作用

Question

我尝试按照此处所述配置 Nuxt 3 和 VueI18n 插件。它适用于在模板中使用

$t()

或在脚本部分中使用

t()

的“正常”翻译。我从 S3 存储桶加载包含翻译的文件，每种语言都有自己的文件。 URL 的本地化也正在发挥作用。

仅数字 (

$n()

) 和日期 (

$d()

) 的本地化不起作用。我按照本指南但没有成功。

这是我的 Vue 组件：

<template>
    <div class="container">
        <h1>{{ $t('index.hello') }}</h1>
        <p>
            Number {{ $n(5000, 'currency') }}
        </p>

        <p>
            {{ $d(new Date()) }}
        </p>
    </div>
</template>

<script setup></script>

$n()

在控制台上给我一个警告：[intlify] 在“de_DE”语言环境消息中找不到“currency”键。

$d()

给我一个 500 错误并显示以下消息：提供的区域设置信息不正确。提供语言环境作为第二个参数

$d("2023-05-06", "de_DE")

会给出以下错误消息：[intlify] 在“de_DE”语言环境消息中找不到“de_DE”键。）`

请参阅下面我的 Nuxt 配置文件：

export default defineNuxtConfig({
    pages: true
    app: {},
    modules: [
        'nuxt-gtag',
        '@nuxtjs/i18n'
    ],
    i18n: {
        defaultLocale: 'de_DE',
        lazy: true,
        langDir: 'lang',
        locales: [{ code: 'de_DE', file: 'loadFromS3.ts', iso: 'de-DE', isCatchallLocale: true }],
        strategy: 'prefix_except_default',
        customRoutes: 'config',
        pages: {
            'catalog/index': {
                de_DE: '/katalog'
            },
            'index': {
                de_DE: '/'
            }
        }
    }
})

Answer 1

在我看来，这是一个相当奇怪的错误，但这是我尝试做的并且有效的方法。所以我尝试全新安装

Nuxt 3

+

@nuxtjs/i18n

并添加

numberFormats

和

datetimeFormats

，我可以重现您的错误。事实证明，如果您将模块配置移到外面，并在

vueI18n

键内提供

i18n

键，并像这样添加模块配置的路径（我遵循了 官方指南）：

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts'
  }
})

现在您需要将配置移动到

./i18n.config.ts

文件，如下所示：

export default defineI18nConfig(() => ({
  defaultLocale: "de_DE",
  lazy: true,
  langDir: "lang",
  locales: [
    {
      code: "de_DE",
      file: "loadFromS3.ts",
      iso: "de-DE",
      isCatchallLocale: true,
    },
  ],
  strategy: "prefix_except_default",
  customRoutes: "config",
  pages: {
    "catalog/index": {
      de_DE: "/katalog",
    },
    index: {
      de_DE: "/",
    },
  },
}));

然后不要忘记在配置中添加

numberFormats

，

datetimeFormats

（取决于您的喜好）：

export default defineI18nConfig(() => ({
  defaultLocale: "de_DE",
  lazy: true,
  ...
  numberFormats: {
    'de-DE': {
      currency: {
        style: 'currency', currency: 'EUR', notation: 'standard'
      },
    }
  },
  datetimeFormats: {
    'de-DE': {
      short: {
        year: 'numeric', month: 'short', day: 'numeric'
      },
      long: {
        year: 'numeric', month: 'short', day: 'numeric',
        weekday: 'short', hour: 'numeric', minute: 'numeric'
      }
    },
  },
}))

不知道为什么一定要这样，说实话，我对这个

Vue I18n

的东西不太有经验，但在我看来，

Vue I18n

与

@nuxtjs/i18n

不一样（它们共享相同的东西） ，但也有一些差异）。