Vue 2实例创建后如何添加I18n国际化功能？

直接通过app.i18n = i18n赋值的方式不可行，因为vue-i18n需要通过插件初始化流程，向Vue原型注入$t、$i18n等方法和属性，同时注册v-t这类指令，直接赋值无法触发这些关键步骤，已渲染的组件也无法正常使用国际化功能。

以下是可行的操作步骤：

1. 提前注册VueI18n插件并创建i18n实例 #

首先要确保VueI18n插件已注册，即使Vue实例已经创建，这一步也必须完成：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

// 注册VueI18n插件
Vue.use(VueI18n)

// 创建i18n实例
const i18n = new VueI18n({
  locale: 'zh-CN', // 默认语言
  messages: {
    'zh-CN': {
      welcome: '欢迎访问'
    },
    en: {
      welcome: 'Welcome'
    }
  }
})

2. 手动注入i18n到Vue原型和实例 #

在Vue实例创建并挂载后，需要手动把i18n实例注入到全局和当前实例中：

const app = new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

// 向Vue原型注入核心方法，让所有组件能通过this访问
Vue.prototype.$i18n = i18n
Vue.prototype.$t = i18n.t.bind(i18n)
Vue.prototype.$tc = i18n.tc.bind(i18n)
// 若需使用日期/数字格式化，可追加$d、$n方法：
// Vue.prototype.$d = i18n.d.bind(i18n)
// Vue.prototype.$n = i18n.n.bind(i18n)

// 给当前app实例绑定i18n内部属性
app._i18n = i18n

// 手动注册v-t指令（如果需要使用指令形式）
Vue.directive('t', VueI18n.directive)

3. 触发组件更新使国际化生效 #

由于组件已经挂载，需要手动强制根组件及其子组件更新，让国际化文本生效：

app.$forceUpdate()

注意事项 #

• 这种延迟注入的方式属于非常规操作，可能存在边缘问题：比如某些组件在挂载时就调用了$t，会出现报错。如果场景允许，建议还是优先在创建Vue实例时传入i18n。
• 如果是因为i18n的语言包需要异步加载，可以先让Vue实例挂载一个加载态组件，等语言包加载完成、i18n初始化完毕后，再替换为业务组件，这样能避免组件渲染时的报错问题。

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