uniapp app使用vue-i18n后重启问题如何解决

在uniapp中使用vue-i18n实现多语言切换后，发现每次重启APP时语言设置会重置回默认状态。尝试了本地存储和全局变量保存语言状态，但依然无法持久化保存用户选择的语言。请问如何解决uniapp+vue-i18n在APP重启后语言设置丢失的问题？需要兼容Android和iOS平台。

2 回复

在main.js中引入i18n后，确保在Vue实例初始化前完成配置。检查语言包加载是否异步导致初始化延迟，可使用同步加载或Promise确保完成后再启动应用。


在 UniApp 中使用 vue-i18n 时，重启问题通常是由于语言切换后页面状态未持久化或初始化顺序不当导致的。以下是常见解决方案：

1. 持久化语言设置

在切换语言时，将当前语言保存到本地存储，并在应用启动时读取。

// main.js 或 App.vue
import { createI18n } from 'vue-i18n'
import messages from './lang'

// 从本地存储获取语言设置，默认中文
const locale = uni.getStorageSync('language') || 'zh'

const i18n = createI18n({
  locale,
  messages
})

// 切换语言示例方法
const switchLanguage = (lang) => {
  i18n.global.locale = lang
  uni.setStorageSync('language', lang)
  // 重启应用使部分配置生效
  uni.reLaunch({ url: '/' })
}

2. 正确处理应用初始化

确保在 App.vue 的 onLaunch 中优先初始化语言设置。

// App.vue
export default {
  onLaunch() {
    // 优先初始化语言
    const savedLang = uni.getStorageSync('language')
    if (savedLang) {
      this.$i18n.locale = savedLang
    }
  }
}

3. 使用全局混入处理页面刷新

在页面显示时检查语言一致性。

// main.js
Vue.mixin({
  onShow() {
    const currentLang = this.$i18n.locale
    const savedLang = uni.getStorageSync('language')
    if (currentLang !== savedLang) {
      this.$i18n.locale = savedLang
    }
  }
})

4. 注意事项

  • 使用 uni.reLaunch() 重启应用时，会重新初始化所有页面，确保语言设置生效
  • 对于 tabBar 页面，可能需要单独处理语言切换后的刷新
  • 部分组件可能需要手动刷新，可使用 this.$forceUpdate()

推荐方案：

结合本地存储 + 应用初始化检查 + 页面显示时验证，可以较好地解决重启后的语言状态保持问题。如果问题依然存在，建议检查 vue-i18n 版本兼容性和 UniApp 框架版本。

回到顶部