如何将Vue I18n货币本地化功能与第三方API集成？

1. 初始化Vue I18n时预留货币配置 #

初始化时不要硬编码货币代码，先预留配置位，后续动态填充：

// i18n配置文件（如src/i18n/index.js）
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    // 你的语言包内容
  },
  numberFormats: {
    en: {
      currency: {
        style: 'currency',
        currency: '' // 留空，后续通过API填充
      }
    },
    zh: {
      currency: {
        style: 'currency',
        currency: ''
      }
    }
    // 其他语言同理配置
  }
})

export default i18n

2. 调用第三方API获取默认货币 #

在应用启动阶段（比如根组件App.vue的生命周期钩子）发起API请求，拿到货币代码后更新Vue I18n配置：

// App.vue
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'

export default {
  setup() {
    const { numberFormats } = useI18n()
    const isLoading = ref(true)

    onMounted(async () => {
      try {
        // 调用第三方API获取默认货币代码（如USD、CNY）
        const res = await fetch('你的第三方API地址')
        const data = await res.json()
        const targetCurrency = data.defaultCurrency // 假设API返回字段为defaultCurrency

        // 批量更新所有语言的货币配置
        Object.keys(numberFormats.value).forEach(lang => {
          numberFormats.value[lang].currency.currency = targetCurrency
        })
      } catch (err) {
        // 请求失败时用兜底货币（如USD）
        Object.keys(numberFormats.value).forEach(lang => {
          numberFormats.value[lang].currency.currency = 'USD'
        })
        console.error('获取默认货币失败:', err)
      } finally {
        isLoading.value = false
      }
    })

    return { isLoading }
  }
}

3. 组件中使用动态货币格式化 #

API请求完成后，直接用Vue I18n的数字格式化方法即可，会自动使用API返回的货币：

<template>
  <div v-if="isLoading">加载中...</div>
  <div v-else>
    <p>{{ $n(199.99, 'currency') }}</p>
    <!-- 若API返回CNY，中文环境会显示¥199.99，英文环境显示CN¥199.99 -->
  </div>
</template>

4. 多语言场景的自定义适配 #

如果需要针对不同语言调整货币显示规则（比如符号位置、小数位数），可以在获取货币后单独配置：

// 例如中文环境下显示货币代码而非符号
if (locale.value === 'zh') {
  numberFormats.value.zh.currency = {
    style: 'currency',
    currency: targetCurrency,
    currencyDisplay: 'code',
    minimumFractionDigits: 2
  }
}

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