vue 2 中通过 vue-i18n 实现文案动态更新，关键在于响应式 locale 绑定与 $t 函数使用；修改 this.$i18n.locale 即可触发所有 $t 文案自动重渲染，并需挂载 i18n 实例、合并 element ui 多语言包、持久化语言选择至 localstorage。
Vue 2 中配合 vue-i18n 实现文案的动态更新，关键在于语言标识（locale）的响应式绑定和翻译函数（$t）的正确使用。只要 locale 变更，所有用 $t 渲染的文本会自动重新求值，无需手动刷新组件或页面。
确保 i18n 实例已正确挂载并响应式
在 main.js 中创建 i18n 实例后，必须通过 new Vue({ i18n }) 挂载到根实例，才能让所有子组件访问 this.$i18n 和 this.$t：
- i18n 实例的 locale 属性是 Vue.observable 的响应式字段，修改它会触发所有依赖翻译的模板重新渲染
- 不要直接改写
messages或重置整个实例，只需赋值this.$i18n.locale = 'en'即可生效 - 推荐从 localStorage 初始化 locale，保证刷新后语言状态不丢失：
locale: localStorage.getItem('lang') || 'zh'
在模板中用 $t 动态渲染文案
所有静态文本都应包裹在 $t() 中，支持嵌套键、插值和复数规则：
- 基础用法：
{{ $t('common.submit') }}→ 对应messages.zh.common.submit: '提交' - 带参数插值：
{{ $t('user.welcome', { name: userName }) }}→zh.user.welcome: '欢迎，{name}！' - 避免硬编码：
<button>{{ $t('form.save') }}</button>，而不是<button>保存</button>
Element UI 组件的文案同步更新
Element UI 2.x 自带多语言包，但需显式合并进 messages，并配置其国际化接口：
- 在 i18n 配置中合并 Element 包：
zh: { ...customZh, ...zhLocale } - 初始化 Element UI 时传入 i18n 回调：
Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value) }) - 这样
<el-button></el-button>、<el-date-picker></el-date-picker>等组件内部文案（如“确定”“取消”“今天”）也会随 locale 切换实时更新
提供语言切换入口并持久化状态
切换动作本身要触发 locale 更新，并保存选择，否则刷新即失效：
- 按钮方式：
<button localstorage.setitem>English</button> - 下拉选择：
<el-select v-model="$i18n.locale"><el-option label="中文" value="zh"></el-option></el-select> - 建议封装一个方法统一处理：
changeLang(lang) { this.$i18n.locale = lang; localStorage.setItem('lang', lang); }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
