Nuxt3 + VueI18n中数字与日期本地化功能失效求助

问题概述 #

已完成Nuxt 3与VueI18n的基础配置，文本翻译（$t()/t()）、S3懒加载翻译文件、URL本地化功能均正常，但数字格式化（$n()）和日期格式化（$d()）功能异常，具体表现：

• $n(5000, 'currency')触发警告：[intlify] Not found 'currency' key in 'de_DE' locale messages
• $d(new Date())触发500错误：Incorrect locale information provided；指定区域后报错：[intlify] Not found 'de_DE' key in 'de_DE' locale messages

相关代码 #

组件代码 #

<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>

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: '/'
            }
        }
    }
})

解决方案 #

1. 补充本地化规则依赖 #

VueI18n的数字/日期格式化依赖对应语言的本地化规则文件，你的懒加载文件loadFromS3.ts大概率只包含了文本翻译，未引入规则。修改该文件：

import deLocale from '@intlify/core-base/locales/de'
// 从S3拉取文本翻译内容
const messages = await fetch('你的S3翻译文件URL').then(res => res.json())

// 合并文本翻译与本地化规则
export default {
  ...messages,
  ...deLocale
}

2. 定义数字/日期格式化规则 #

你需要明确配置numberFormats和dateTimeFormats，有两种方式：

方式一：在Nuxt配置中直接声明

export default defineNuxtConfig({
  // ...其他配置
  i18n: {
    // ...原有i18n配置
    numberFormats: {
      de_DE: {
        currency: {
          style: 'currency',
          currency: 'EUR',
          minimumFractionDigits: 2
        }
      }
    },
    dateTimeFormats: {
      de_DE: {
        short: {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        },
        long: {
          year: 'numeric',
          month: 'long',
          day: 'numeric',
          weekday: 'long'
        }
      }
    }
  }
})

方式二：在S3翻译文件中包含格式配置

如果坚持用懒加载，确保你的JSON翻译文件包含对应字段：

{
  "index": {
    "hello": "Hallo Welt"
  },
  "numberFormats": {
    "currency": {
      "style": "currency",
      "currency": "EUR",
      "minimumFractionDigits": 2
    }
  },
  "dateTimeFormats": {
    "short": {
      "year": "numeric",
      "month": "2-digit",
      "day": "2-digit"
    }
  }
}

3. 修正$d()调用方式 #

$d()的第二个参数是格式名称（如short/long），不是区域码。正确写法：

<p>
  {{ $d(new Date(), 'short') }}
</p>

若需切换其他区域，确保该区域规则已加载，调用：

<p>
  {{ $d(new Date(), 'short', 'en-US') }}
</p>

4. 统一区域码格式 #

建议将配置中的code改为标准连字符格式（de-DE），与iso保持一致，避免兼容性问题：

locales: [{ code: 'de-DE', file: 'loadFromS3.ts', iso: 'de-DE', isCatchallLocale: true }],
defaultLocale: 'de-DE'

内容的提问来源于stack exchange，提问作者Brotzka