通过 $t() 动态翻译文本，响应式更新 locale 即可切换语言；支持插值、单复数、持久化及图标/路由等非文本内容国际化，语言包应扁平化组织。

直接在模板中用 $t() 方法调用翻译键，配合全局 i18n 实例的 locale 属性响应式更新，就能实现文本动态切换，无需刷新页面或手动重渲染。

模板里用 $t 获取翻译文本

在 `

• {{ $t('welcome.title') }} → 根据当前语言显示“欢迎标题”或“Welcome Title”
• {{ $t('form.placeholder', { field: '用户名' }) }} → 支持带参数的动态插值
• {{ $tc('cart.item', itemCount) }} → 自动处理单复数（如 “1 item” / “3 items”）

语言切换只需改 i18n.locale

只要修改根 i18n 实例的 locale 值，所有使用 $t 的地方会自动响应更新：

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

• Options API：直接赋值 this.$i18n.locale = 'zh-CN' 或 app.config.globalProperties.$i18n.locale = 'en-US'
• Composition API（Vue 3）：i18n.locale.value = 'ja-JP'（i18n 是 createI18n 返回的实例）
• 搭配 localStorage 持久化：切换后执行 localStorage.setItem('locale', 'zh-CN')，初始化时读取并设置

确保语言包结构扁平、可维护

推荐按语言文件组织，每个文件导出一级对象，避免深层嵌套：

• zh.js：export default { login: '登录', logout: '退出' }
• en.js：export default { login: 'Login', logout: 'Logout' }
• 加载时合并进 messages：messages: { zh, en }，不建议写成 { common: { login: '...' } }

非文本内容也要同步国际化

按钮图标名、表单 placeholder、路由 title、alt 文字等，都应走同一套 i18n 流程：

• :placeholder="$t('form.emailPlaceholder')"
• :title="$t('tooltip.delete')"
• 路由 meta 加 title: 'dashboard'，导航守卫中用 document.title = $t(to.meta.title)
• 图标映射可放在语言包里：icons: { settings: 'gear', language: 'globe' }，再用 :name="$t('icons.settings')"

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！