Vue 依赖注入如何实现多语言国际化语言包的全局统一向下分发

Vue依赖注入实现多语言国际化的核心是通过vue-i18n创建全局i18n实例，利用Vue插件机制和根实例注入，使所有组件可直接访问$t方法实现响应式语言切换。

Vue 依赖注入实现多语言国际化语言包的全局统一向下分发，核心是借助 vue-i18n 创建一个可被所有组件访问的 i18n 实例，并通过 Vue 的插件机制（Vue.use()）和实例挂载（i18n 选项）完成自动注入。这不是手动逐层传参，而是利用 Vue 的响应式上下文能力，让语言配置“透传”到任意嵌套层级。

创建并导出统一的 i18n 实例

在 src/i18n/index.js（或 src/lang/index.js）中集中定义：

1. 导入 vue-i18n 并调用 Vue.use(VueI18n) 注册插件
2. 按语言组织 messages 对象，如 zh-CN、en-US，支持嵌套结构（如 user.name）
3. 设置默认 locale（常从 localStorage 或浏览器语言探测）
4. 启用 fallbackLocale 防止缺失翻译时崩溃
5. 导出配置好的 new VueI18n(...) 实例

在根实例中注入 i18n

在 main.js 中创建 Vue 根实例时，把 i18n 实例作为选项传入：

1. Vue 2 写法：new Vue({ i18n, render: h => h(App) }).$mount('#app')
2. Vue 3（Composition API）需配合 createApp 和 app.use(i18n)，且 i18n 实例需用 createI18n 创建
3. 一旦注入，所有子组件无需 import 就能通过 this.$i18n（Vue 2）或 useI18n()（Vue 3）访问

语言包结构与加载方式

为保持可维护性，推荐拆分语言文件：

1. 每个语言单独一个 JS/JSON 文件，如 zh-CN.js 导出纯对象：export default { login: { title: '登录', submit: '提交' } }
2. 在 index.js 中统一 import 并组装到 messages 中
3. 支持动态加载：按需 import() + setLocaleMessage，适合大项目按语言懒加载
4. 若集成 Element UI，还需将对应语言包（如 element-ui/lib/locale/lang/zh-CN）合并进 messages

模板与脚本中使用翻译

注入后，语言能力自然向下分发，各处调用方式一致：

1. 模板中：{{ $t('login.title') }} 或 v-text="$t('login.submit')"
2. JS 逻辑中：this.$t('user.name')（Vue 2）或 const { t } = useI18n(); t('button.cancel')（Vue 3）
3. 计算属性、watch、methods 内均可直接使用，响应式更新 locale 会自动刷新所有 $t 结果