Vue3+Quasar2下vue-i18n翻译文件使用$t/$tc报未定义如何解决

• 你在静态导出的翻译配置文件顶层直接调用$t/$tc，这两个方法是vue-i18n实例初始化后才会注入到Vue组件上下文的方法，普通ES模块顶层不存在这个全局变量，自然触发*"$tc is not defined"*报错。
• 现有代码逻辑完全失效：非空字符串在JS中属于真值，你写的'A' || 'B'结构永远只会返回||前面的内容，后面的单复数判断逻辑永远不会执行。
• 额外注意：适配Vue 3的vue-i18n v9+版本中，$tc已经作为兼容旧版的别名存在，复数逻辑已经合并到$t方法中，不需要单独调用$tc。

vue-i18n本身内置了多语言复数规则支持，不需要手动在配置文件里拼接单复数字符串，按照官方规范配置即可，Quasar 2框架对vue-i18n做了默认适配，不需要额外修改框架配置：

1. 调整翻译配置文件格式 #

复数翻译的文案用|分隔单数、复数形式即可，法语等不同语言的单复数匹配规则vue-i18n已经内置适配，不需要手动判断传1还是其他数字。对于需要拼接名词的前后缀文案，用{占位符}预留位置即可：

// 法语翻译文件 fr.js
export default {
  survey: {
    // | 前为单数文案，后为复数文案
    name: 'Questionnaire | Questionnaires',
    new: 'Nouveau {name} | Nouveaux {name}',
    wd: 'Un {name} | Des {name}',
    mine: 'Mon {name} | Mes {name}',
    show: 'Voir le {name} | Voir les {name}'
  }
}

2. 业务代码中调用时传参触发单复数匹配 #

使用时把数量作为$t/t的第二个参数传入，方法会自动匹配对应单复数形式，需要拼接的名词作为第三个参数的对象属性传入即可：

<template>
  <!-- 模板中使用 -->
  <div>
    <!-- 单数场景 -->
    <p>{{ $t('survey.name', 1) }}</p>
    <!-- 输出：Questionnaire -->
    <p>{{ $t('survey.new', 1, { name: $t('survey.name', 1) }) }}</p>
    <!-- 输出：Nouveau Questionnaire -->

    <!-- 复数场景，传任意>1的数字都会自动匹配复数规则 -->
    <p>{{ $t('survey.name', 5) }}</p>
    <!-- 输出：Questionnaires -->
    <p>{{ $t('survey.show', 5, { name: $t('survey.name', 5) }) }}</p>
    <!-- 输出：Voir les Questionnaires -->
  </div>
</template>

<script setup>
// script中使用时，从useI18n解构t方法，不要直接调用全局$t
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

// 单数逻辑
const singleSurveyText = t('survey.mine', 1, {
  name: t('survey.name', 1)
})

// 复数逻辑
const multiSurveyText = t('survey.mine', 10, {
  name: t('survey.name', 10)
})
</script>

注意事项 #

不要在翻译配置文件顶层硬编码调用翻译方法，配置文件加载时i18n实例通常还未完成初始化，很容易出现调用异常。如果确实需要复用翻译片段，优先用占位符传参的方式实现，耦合度更低也更易维护。

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