Vue纯JS文件中如何正确使用i18n的t()函数？

问题出在你直接调用了i18n.t()，Vue I18n v9+版本中，createI18n返回的实例里，翻译方法t挂载在global属性下，并非直接挂在实例本身。

修改方案 #

将纯JS文件里的i18n.t()替换为i18n.global.t()即可。

修改后的纯JS文件代码：

import i18n from "./i18n";

export default {
...
badge(status){

    switch (status) {
        case 1:
            return  `<span class="badge text-bg-primary">${ i18n.global.t('modules.clients.status.approved') }</span>`;
            break;
    
        default:
            break;
    }

 }
...
}

补充说明 #

如果你的Vue I18n是适配Vue 2的v8版本，createI18n返回的实例确实可以直接调用i18n.t()，但从你的代码写法判断，大概率使用的是适配Vue 3的v9+版本，因此通过global属性调用t方法是正确的。

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