Vue3 i18n全局Locale读写异常：$i18n未定义及修改失效

问题分析 #

你遇到的核心问题是Vue I18n v9+（适配Vue3）的Composition API用法、全局实例操作逻辑和旧版本存在差异，导致$i18n未定义、locale修改无效。

解决方案 #

1. 修复main.ts中全局修改locale的代码 #

Vue I18n v9+中i18n.global.locale是响应式Ref对象，直接赋值会覆盖Ref本身而非修改其值，正确写法是操作value属性，或使用更推荐的setLocale方法：

// 方式1：修改Ref的value属性
i18n.global.locale.value = "en";

// 方式2：使用setLocale方法（更直观）
i18n.global.setLocale("en");

2. 组件中用Composition API正确操作locale #

在Composition API组件中，禁止使用this.$i18n或直接访问$i18n，必须通过useI18n钩子获取实例和方法：

import { useI18n } from "vue-i18n";

// 解构全局作用域的i18n对象、翻译方法和locale
const { t, locale, i18n } = useI18n({ useScope: 'global' });

// 读取当前locale
console.log(locale.value);

// 修改locale（两种方式二选一）
locale.value = "en";
// 或通过i18n实例修改全局locale
i18n.global.locale.value = "en";

• useScope: 'global'确保操作的是全局locale，而非组件局部locale。
• 仅需修改全局locale时，直接操作解构出的locale变量即可，无需访问i18n.global。

3. 模板中正确使用$i18n #

模板中可直接使用$i18n访问全局实例，前提是app.use(i18n)已在app.mount("#app")前执行：

<template>
  <div>当前语言：{{ $i18n.locale }}</div>
  <button @click="$i18n.locale = 'en'">切换为英文</button>
</template>

若使用<script setup>，无需额外注册，$i18n会自动注入模板。

4. 优化i18n配置（可选但推荐） #

显式声明legacy: false可禁用旧版选项式API支持，避免混淆，配置更清晰：

import { createI18n } from "vue-i18n";
import en from "./locales/en.json";
import nl from "./locales/nl.json";

const i18n = createI18n({
  legacy: false, // 禁用旧版API，专注Composition API
  locale: "nl",
  allowComposition: true,
  warnHtmlInMessage: "off",
  fallbackLocale: "nl",
  messages: { en, nl },
});
export default i18n;

完整组件示例（