如何在NuxtJS i18n中实现货币本地化并解决currencyDisplay报错

问题根源 #

你触发报错的核心原因是currencyDisplay字段的取值不符合Intl.NumberFormat的规范要求：

• currencyDisplay 不支持直接传入货币代码（比如USD/EUR），它仅支持以下几个合法枚举值：
  • symbol：显示货币符号（比如€、$，默认值）
  • code：显示货币ISO代码（比如EUR、USD）
  • name：显示货币全称（比如欧元、美元）
  • narrowSymbol：使用窄格式符号（适用于需要区分同符号不同货币的场景）

另外你配置里还有两个可优化的点，避免后续出现其他适配问题：

1. 德国的ISO locale代码标准写法是de-DE不是de-GER，避免部分运行环境识别异常
2. 如果需要适配英国货币格式，对应的locale是en-GB，货币参数设为GBP就能得到你提到的1,234,567.89格式的英镑展示效果

修复后的配置 #

// 提前导入你对应的语言包即可
import en from './locales/en.json'
import de from './locales/de.json'

export default defineNuxtConfig({
  // 其他你的原有配置
  i18n: {
    locales: [
      { code: 'en', iso: 'en-US', dir: 'ltr' },
      { code: 'de', iso: 'de-DE', dir: 'ltr' },
      // 需要英国适配可加下面这条配置
      // { code: 'en-GB', iso: 'en-GB', dir: 'ltr' }
    ],
    defaultLocale: 'de',
    vueI18n: {
      numberFormats: {
        'en-US': {
          currency: {
            style: 'currency', 
            currency: 'USD',
            // 按需选值即可，要显示$就填symbol，要显示USD就填code
            currencyDisplay: 'symbol'
          }
        },
        'de-DE': {
          currency: {
            style: 'currency', 
            currency: 'EUR',
            // 德国地区填symbol会自动显示€，且格式符合德式千分位用点、小数位用逗号的规范
            currencyDisplay: 'symbol'
          }
        },
        // 英国货币配置示例
        // 'en-GB': {
        //   currency: {
        //     style: 'currency',
        //     currency: 'GBP',
        //     currencyDisplay: 'symbol'
        //   }
        // }
      },
      fallbackLocale: 'de',
      messages: {
        en: en.messages,
        de: de.messages,
      },
    },
  },
})

验证效果 #

修改配置后重启项目，模板里的{{ $n(100, 'currency') }}就会按当前选中的locale正常渲染：

• 德文locale下显示100,00 €
• 美国英文locale下显示$100.00
• 英国locale（如果添加了）下显示£100.00

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