Vue 3 Composition API 中 i18n 切换 locale 无响应且无报错如何解决

核心原因 #

你当前使用的是Vue-i18n v9及以上版本，默认组合式API模式下i18n.global.locale是ref类型的响应式对象，直接赋值给i18n.global.locale会覆盖ref实例本身，不会触发响应式更新，因此页面无变化也不会抛出错误。

修复步骤 #

• 修改setLocale方法的赋值逻辑，访问ref的.value属性赋值：

import i18n from "../i18n";
const setLocale = (lang) => {
  i18n.global.locale.value = lang;
};

• 确认i18n配置中legacy参数设置正确，使用组合式API必须设为false：

// 你的i18n配置文件示例
import { createI18n } from 'vue-i18n'
import id from './locales/id.json'
import en from './locales/en.json'

export default createI18n({
  legacy: false, // 组合式API必填项
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    id,
    en
  }
})

• 确认i18n实例已正确注册到Vue应用：

// 项目入口文件main.js示例
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'

createApp(App).use(i18n).mount('#app')

额外排查点 #

• 确认id、en对应的翻译资源已全部导入到i18n配置的messages字段中，没有缺失对应语言的翻译键
• 确认模板中使用翻译的语法正确，组合式API下可通过const { t } = useI18n()获取翻译方法，模板中直接使用{{ $t('翻译键名') }}即可

内容的提问来源于stack exchange，提问作者Sherwin Variancia