App端多语言切换必须重载页面并重建i18n实例,因uni.setLocale不触发重渲染且this.$i18n.locale赋值无效;需用uni.reLaunch强制重建页面栈,并在main.js中根据storage动态创建i18n实例。

uni-app 的多语言切换在 App 端不能靠 uni.setLocale 实时生效——它只改标识、不触发重渲染,调用后 $t('xxx') 依然返回旧语言文本。
App 端语言切换必须重载页面 + 重置 i18n 实例
因为 App(iOS/Android)的 native 层语言由系统决定,uni.setLocale 仅影响极少数内置组件(如 picker 标题),对 $t、uni.$t 或 Vue 组件内响应式翻译完全无效。真正起作用的是初始化 i18n 实例时传入的 locale 值,后续直接赋值 this.$i18n.locale = 'en' 在 App 端不会刷新视图。
- 切换语言时,必须用
uni.reLaunch({ url: '/pages/index/index' })或uni.redirectTo强制重建页面栈 - 确保每次页面重建时,
i18n实例都用新locale重新创建(不要复用旧实例) - 别把
i18n挂在Vue.prototype上——App 端页面重建后原型链会断,this.$i18n变成undefined - 推荐在
main.js中根据uni.getStorageSync('locale') || uni.getLocale()动态构造i18n实例,而非写死默认值
vue-i18n 初始化要区分 Vue 2 / Vue 3 版本
uni-app 项目可能基于 Vue 2 或 Vue 3,vue-i18n 的 API 和行为差异极大,装错版本会导致 $t 不可用或报错 createI18n is not a function。
- Vue 2 项目:装
vue-i18n@8.x,用new VueI18n({ locale, messages }) - Vue 3 项目(推荐):装
vue-i18n@9.x,用createI18n({ legacy: false, locale, messages }),且必须设legacy: false启用组合式 API 模式 - 在
main.js中挂载方式不同:Vue 2 是Vue.use(VueI18n)+new Vue({ i18n });Vue 3 是app.use(i18n) - H5 和小程序端可直接用
this.$i18n.locale = 'en'切换并响应,但 App 端仍需 reload —— 这是平台限制,不是配置问题
语言包组织建议按模块拆分 + 动态合并
把所有翻译塞进一个大 JSON 文件会导致首屏加载慢、热更新困难,也难做按需加载。更合理的做法是按功能/页面拆分,再运行时合并。
- 目录结构示例:
@/locales/common.js(按钮、提示)、@/locales/login.js、@/locales/profile.js - 初始化时只加载基础包,登录后调用
i18n.mergeLocaleMessage('zh-Hans', require('@/locales/profile.js'))补充 - 避免用
require+ 字符串拼接路径(如require(`@/locales/${lang}.js`)),Webpack 无法静态分析,会导致构建失败 - key 命名建议带命名空间,如
login.submit、common.cancel,避免冲突且语义清晰
小程序和 H5 端可无感切换,但 App 端必须接受 reload
微信小程序和 H5 支持 this.$i18n.locale = 'en' 后自动更新所有 $t,无需刷新;但 App(尤其是 Android)的 WebView 生命周期和 Vue 实例销毁机制决定了:页面状态无法跨 reload 保持,这是底层限制。
- 想“无感”?只能妥协:用
uni.navigateTo跳转到同页面并传参,然后在onLoad中手动触发i18n.locale并this.$forceUpdate()—— 但部分嵌套组件、computed、watch仍可能不更新,风险高 - 最稳方案仍是
uni.reLaunch,配合uni.setStorageSync('locale', 'en')持久化,确保下次冷启动也正确 - 别依赖
uni.getSystemInfoSync().language做格式化,它返回系统语言,不是你设置的语言;要用就用uni.getLocale()(仅作参考,App 端也不可靠)
真正麻烦的从来不是怎么写 $t,而是怎么让 App 端的「切换」不闪退、不丢状态、不重走登录流程——这些得靠路由控制、storage 同步、以及对页面重建时机的精确把握。


















