Vue.js中在JS文件动态使用$i18n文本的实现方案

核心思路：你不需要依赖Vue实例来使用i18n，直接用初始化时创建的i18n实例即可——因为Vue组件里的$i18n本质就是这个实例挂载到Vue原型上的别名。

步骤1：确认i18n实例已导出 #

首先确保你的i18n配置文件（比如src/i18n.js）是导出了i18n实例的，类似这样：

// src/i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

// 初始化i18n实例
const i18n = new VueI18n({
  locale: window.appConfig?.locale || 'zh-CN', // 可结合异步拉取的配置
  messages: {
    'zh-CN': {
      super_name: '超级名称'
    },
    'en-US': {
      super_name: 'Super name'
    }
  }
})

export default i18n

步骤2：在目标JS文件中使用i18n实例 #

修改你那个导出文本的JS文件，直接导入i18n实例，用i18n.t()方法获取动态翻译文本：

// 导入i18n实例，路径根据项目实际结构调整
import i18n from '@/i18n.js'

// 用getter实现动态获取（语言切换时自动更新）
export default {
  get super_name() {
    return i18n.t('super_name')
  }
}

备选方案：用函数获取 #

如果不想用getter，也可以导出一个函数，每次调用获取最新翻译：

import i18n from '@/i18n.js'

export default {
  getSuperName() {
    return i18n.t('super_name')
  }
}

注意事项 #

如果你的i18n消息是异步加载的（比如和config.json一起拉取），只需确保在调用i18n.t()之前，消息已经注入到i18n实例中即可——比如在appInit()里先更新i18n的messages，再创建Vue实例。

内容的提问来源于stack exchange，提问作者Дмитрий