在 vue 3 中使用 vue-i18n 时，若初始化配置中设置 `legacy: false`（composition api 模式），则无法通过 `this.$i18n.locale = 'xx'` 动态修改语言；必须启用 `legacy: true` 并配合 options api 才能兼容该写法。
你遇到的问题根源在于 API 模式与用法不匹配：this.$i18n.locale = ... 是 vue-i18n v8 的 Options API（即 Vue 2 风格）写法，而你在 createI18n 中显式设置了 legacy: false，这会强制进入 Composition API 模式（即 useI18n() + locale.value = 'xx'），导致 this.$i18n 不存在或不可写，从而语言始终回退到 fallbackLocale: 'de'。
✅ 正确解决方案是统一模式 —— 若你依赖 this.$i18n（如在 mounted() 中赋值），请启用 legacy 模式：
// i18n.js 或 ./config.js
import { createI18n } from 'vue-i18n';
import translations from '@/translation.js';
const i18n = createI18n({
legacy: true, // ✅ 关键：启用 Options API 兼容模式
locale: 'de', // 可设默认值（非空），避免初始未定义
fallbackLocale: 'de',
messages: translations // ⚠️ 注意：原代码中误写为 `translation`，应为 `messages`
});
export default i18n;同时修正 main.js 中的导入路径（确保与实际文件名一致）：
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n.js'; // ✅ 改为实际路径（如原问题中是 i18n.js，非 config.js）
const app = createApp(App);
app.use(i18n);
app.mount('#app');在 App.vue 中即可安全使用：
立即学习“前端免费学习笔记（深入）”；
? 补充说明与注意事项：
- fallbackLocale 仅在当前 locale 对应的语言包缺失 key 时触发，不会覆盖已设置的有效 locale；若始终显示德语，大概率是 this.$i18n.locale 赋值失败（因 legacy: false 导致 $i18n 未挂载）。
- 若你计划全面迁移到 Composition API（推荐长期方案），则应改用 useI18n() 并响应式管理 locale：
// Composition API 方式（无需 legacy）
import { useI18n } from 'vue-i18n';
export default {
setup() {
const { locale } = useI18n();
const setLang = (lang) => {
locale.value = lang; // ✅ 响应式更新
};
return { setLang };
}
}- 最后务必检查 translations 数据结构是否符合 messages 格式（如 { de: { key: 'Text' }, en: { key: 'Text' } }），否则即使 locale 切换成功，也会因 key 缺失而回退显示 translation.KEY。
综上，启用 legacy: true 是最快修复你当前问题的方案，兼顾兼容性与开发效率。
