Vue3+Vite中如何用Vue-I18n v9独立分离语言与货币

你不需要创建数百种语言-货币组合，核心思路是将语言格式规则与货币代码解耦，利用Vue-I18n的动态格式化参数能力，实现两者独立切换。以下是具体实现步骤：

1. 配置基础语言的货币格式化模板 #

只需要为每种双字母语言（如en、ru）定义通用的货币格式规则，无需绑定具体货币代码：

// localize/currencies.js
export default {
  en: {
    currency: {
      style: "currency",
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    }
  },
  ru: {
    currency: {
      style: "currency",
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    }
  },
  ja: {
    // 针对特殊语言自定义规则，比如日语货币无需小数位
    currency: {
      style: "currency",
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    }
  }
  // 其他20+语言按此格式添加
}

2. 初始化Vue-I18n时引入模板 #

将上述配置传入createI18n的numberFormats选项：

// localize/index.js
import { createI18n } from 'vue-i18n'
import numberFormats from "./currencies.js";
import messages from './messages' // 你的语言包文件

export default createI18n({
  legacy: false, // Vue3推荐启用Composition API模式
  locale: 'en', // 默认语言
  fallbackLocale: 'en',
  messages,
  numberFormats
})

3. 维护全局货币状态 #

用Pinia或Vue响应式变量存储用户选择的货币代码，实现独立切换：

// stores/currency.js
import { defineStore } from 'pinia'

export const useCurrencyStore = defineStore('currency', {
  state: () => ({
    currentCurrency: 'USD' // 默认货币
  }),
  actions: {
    setCurrency(currency) {
      this.currentCurrency = currency
    }
  }
})

4. 组件中动态格式化货币 #

结合当前语言（$i18n.locale）和选中的货币，调用Vue-I18n的格式化函数，动态传入货币参数：

Option API示例 #

<template>
  <div>{{ formattedPrice }}</div>
  <button @click="$store.currency.setCurrency('EUR')">切换为欧元</button>
</template>

<script>
export default {
  computed: {
    formattedPrice() {
      // 第三个参数动态覆盖货币代码
      return this.$n(123.45, 'currency', { currency: this.$store.currency.currentCurrency })
    }
  }
}
</script>

Composition API示例 #

<template>
  <div>{{ formattedPrice }}</div>
  <button @click="setCurrency('EUR')">切换为欧元</button>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
import { useCurrencyStore } from '@/stores/currency'
import { computed } from 'vue'

const { n } = useI18n()
const currencyStore = useCurrencyStore()
const setCurrency = (currency) => currencyStore.setCurrency(currency)

const formattedPrice = computed(() => {
  return n(123.45, 'currency', { currency: currencyStore.currentCurrency })
})
</script>

方案优势 #

• 无需维护500+组合条目，仅需20+语言模板和25+货币代码
• 完美支持双字母语言标识，适配navigator.language的场景
• 语言与货币完全独立切换，用户体验更灵活
• 基于Vue-I18n原生能力，无需额外复杂封装

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