Vue3中如何在助手函数里使用vue-i18n翻译功能

问题描述 #

我在Vue项目中使用vue-i18n实现了翻译功能，main.ts核心代码如下：

// Create vue app
const app = createApp(App)

// Use plugins
app.use(i18n)
....

// Mount vue app
app.mount('#app')

组件内的翻译功能运行正常，但在独立文件编写时长格式化的助手函数时，遇到了$t未定义的编译错误。助手函数代码如下：

export default {
  formatDuration: (value: number) => {
    if (!value){
        return null;
    }
    
    let duration = dayjs.duration(value, "seconds");
    let secondsPart = duration.seconds();
    let minutesPart = duration.minutes();
    return (duration + " " + $t("seconds")); // build error
  }
}

需要实现的是根据当前语言，将时长格式化为易读形式（如英文“4 minutes, 2 seconds”、德文“4 Minuten, 2 Sekunden”）。

解决方案 #

方法1：直接导入i18n实例（推荐纯工具函数场景） #

首先在定义i18n实例的文件中（比如i18n.ts）导出实例：

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  // 你的配置项：locale、messages等
})

export default i18n

然后在助手函数文件中导入该实例，使用i18n.global.t()替代组件内的$t：

import i18n from './path/to/i18n'
import dayjs from 'dayjs'

export default {
  formatDuration: (value: number) => {
    if (!value){
        return null;
    }
    
    const duration = dayjs.duration(value, "seconds");
    const secondsPart = duration.seconds();
    const minutesPart = duration.minutes();
    
    const parts = [];
    if (minutesPart > 0) {
      parts.push(`${minutesPart} ${i18n.global.t("minutes")}`);
    }
    if (secondsPart > 0) {
      parts.push(`${secondsPart} ${i18n.global.t("seconds")}`);
    }
    return parts.join(', ');
  }
}

方法2：使用Vue的inject（适用于组合式API上下文） #

如果助手函数是在Vue组件或支持组合式API的场景中调用，可以通过inject获取i18n实例：

import { inject } from 'vue'
import dayjs from 'dayjs'

export default {
  formatDuration: (value: number) => {
    if (!value){
        return null;
    }
    
    const i18n = inject('i18n');
    const duration = dayjs.duration(value, "seconds");
    const secondsPart = duration.seconds();
    const minutesPart = duration.minutes();
    
    const parts = [];
    if (minutesPart > 0) {
      parts.push(`${minutesPart} ${i18n.global.t("minutes")}`);
    }
    if (secondsPart > 0) {
      parts.push(`${secondsPart} ${i18n.global.t("seconds")}`);
    }
    return parts.join(', ');
  }
}

注意：此方法仅能在Vue的注入上下文内使用，纯工具函数场景优先选方法1。

补充：处理复数形式优化 #

为了适配单复数差异（如英文1 second/2 seconds），可以在语言包中定义复数规则：

// 英文messages
{
  "seconds": "second|seconds",
  "minutes": "minute|minutes"
}

然后在助手函数中传递数量参数实现复数翻译：

parts.push(`${minutesPart} ${i18n.global.t("minutes", minutesPart)}`);
parts.push(`${secondsPart} ${i18n.global.t("seconds", secondsPart)}`);

内容的提问来源于stack exchange，提问作者Martin H.