Vue3 vue-i18n：如何在组件外使用$t及格式化日期时间？

核心思路是直接使用导出的i18n实例，而非依赖组件上下文，具体步骤如下：

1. 确保i18n实例被单独导出 #

在你的i18n配置文件（比如src/i18n.js）中，创建并导出i18n实例：

import { createI18n } from 'vue-i18n'

// 定义多语言消息
const messages = {
  zh: {
    // 你的中文翻译内容
  },
  en: {
    // 你的英文翻译内容
  }
}

const i18n = createI18n({
  locale: 'zh', // 默认语言
  messages
})

export default i18n

2. 在main.js中挂载i18n #

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'

const app = createApp(App)
app.use(i18n)
app.mount('#app')

3. 在组件外部的JS文件中调用i18n方法 #

直接导入刚才导出的i18n实例，用i18n.global.t()替代组件内的$t，日期格式化的$d对应i18n.global.d()：

// 导入i18n实例（路径根据你的项目结构调整）
import i18n from '@/i18n'

function transformDatetime(config, value) {
    if (value) {
        // 使用i18n的日期格式化方法
        return i18n.global.d(new Date(value), config);
    }
    // 使用i18n的翻译方法
    return i18n.global.t('-');
}

补充说明 #

getCurrentInstance仅能在组件的setup函数、生命周期钩子等组件上下文环境中生效，组件外部没有对应的实例，所以无法通过这种方式获取$t。直接使用导出的i18n实例是最可靠的组件外调用方式。

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