Vue3+vue-i18n外部文件初始化后无法切换语言的问题求助

1. 修正i18n配置的属性名错误 #

你的i18n.js里把核心配置项messages写成了translation，框架无法识别翻译资源，导致始终触发fallbackLocale。修改如下：

import { createI18n } from 'vue-i18n';
import translations from '@/translation.js';
    
const i18n = createI18n({
  legacy: false,
  locale: '', // 留空以便后续设置
  fallbackLocale: 'de', 
  messages: translations, // 修正为messages属性
});

export default i18n;

2. 修正main.js的i18n文件引入路径 #

你创建的是i18n.js，但main.js里引入的是./config.js，路径不匹配导致加载的不是正确的i18n实例：

import {createApp} from 'vue';
import App from './App.vue';
import i18n from './i18n.js'; // 改为正确的文件路径

const app = createApp(App); 
app.use(i18n); 
app.mount('#app');

3. 适配legacy: false模式的locale设置方式 #

开启legacy: false后，vue-i18n启用Composition API模式，Options API中的this.$i18n.locale是只读属性，必须通过value修改：

在App.vue的mounted钩子中调整：

mounted() { 
  const targetLang = this.$store.getters['settings'].language;
  // 先验证目标语言是否在可用列表中
  if (this.$i18n.availableLocales.includes(targetLang)) {
    this.$i18n.locale.value = targetLang;
  }
}

设置页面切换语言时同样遵循此规则：

// 示例切换语言方法
switchLanguage(lang) {
  if (this.$i18n.availableLocales.includes(lang)) {
    this.$i18n.locale.value = lang;
    // 同步保存到store和本地文件
    this.$store.dispatch('settings/saveLanguage', lang);
  }
}

4. 验证translation.js的结构合法性 #

确保翻译文件的结构符合vue-i18n要求，示例结构如下：

// translation.js
export default {
  en: {
    common: {
      welcome: 'Welcome'
    }
  },
  de: {
    common: {
      welcome: 'Willkommen'
    }
  }
}

5. 优化初始locale设置 #

避免初始locale为空字符串，可提前从本地存储或store读取默认值：

// i18n.js中
import { createI18n } from 'vue-i18n';
import translations from '@/translation.js';
// 从localStorage获取缓存的语言设置
const initialLocale = localStorage.getItem('app-language') || '';
    
const i18n = createI18n({
  legacy: false,
  locale: initialLocale || 'de', // 有缓存则用缓存，无则用fallback
  fallbackLocale: 'de', 
  messages: translations,
});

export default i18n;

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