Vue 通过依赖注入实现多语言国际化的核心方式，是借助 vue-i18n 创建全局 i18n 实例，并结合 Vue 插件机制与根实例注入，让所有组件都能直接访问 $t 方法，从而实现响应式的语言切换与统一管理。
在 Vue 项目中，通过依赖注入实现多语言国际化，实质上就是把语言包做全局统一下发。核心思路是借助 vue-i18n 创建一个可被全部组件访问的 i18n 实例，再结合 Vue 的插件机制（Vue.use()）和根实例挂载（i18n 选项）自动完成注入。通俗来说，这种方案并不是依赖手动逐层传递参数，而是利用 Vue 的响应式上下文能力，让国际化配置能够自然“透传”到任意嵌套组件中，方便实现全局统一的多语言管理。
创建并导出统一的 i18n 实例
通常可在 src/i18n/index.js（或 src/lang/index.js）中集中完成国际化配置：
- 引入
vue-i18n并执行Vue.use(VueI18n)完成插件注册 - 按照语言类型组织
messages对象，例如zh-CN、en-US，并支持嵌套键值结构（如user.name） - 设置默认
locale，一般可结合 localStorage 或浏览器语言自动识别 - 开启
fallbackLocale，避免翻译缺失时页面报错或显示异常 - 最终导出配置完成的
new VueI18n(...)实例，作为全局语言管理入口
在根实例中注入 i18n
在 main.js 中创建 Vue 根实例时，需要把 i18n 实例注入进去：
- Vue 2 常见写法：
new Vue({ i18n, render: h => h(App) }).$mount('#app') - Vue 3（Composition API）通常配合
createApp与app.use(i18n)使用，同时 i18n 实例需要通过createI18n创建 - 完成注入后，所有子组件都无需单独 import，即可通过
this.$i18n（Vue 2）或useI18n()（Vue 3）直接访问国际化能力
语言包结构与加载方式
为了提升可维护性和扩展性，通常建议将多语言文件拆分管理：
- 每种语言单独维护一个 JS 或 JSON 文件，例如
zh-CN.js导出纯对象：export default { login: { title: '登录', submit: '提交' } } - 在
index.js中统一 import 后再组装进messages配置中，便于集中管理语言包 - 支持动态加载方案：结合按需
import()和setLocaleMessage，适合大型项目按语言懒加载，优化首屏性能 - 如果项目集成了 Element UI，还需要把对应的组件库语言包（如
element-ui/lib/locale/lang/zh-CN）一并合并到messages中
模板与脚本中使用翻译
当 i18n 完成注入后，语言能力会自动向下分发，模板和脚本中的使用方式也保持统一：
- 模板中可直接使用：
{{ $t('login.title') }}或v-text="$t('login.submit')" - 在 JS 逻辑中可调用：
this.$t('user.name')（Vue 2）或const { t } = useI18n(); t('button.cancel')（Vue 3） - 无论是在计算属性、watch 还是 methods 中都能直接使用，且当
locale发生响应式变化时，所有$t的翻译结果都会自动更新
