在 Vue3 中实现多语言国际化（配置 i18n 实例）

在 Vue3 中实现多语言国际化通常使用 vue-i18n 库。以下是详细步骤：

---

1. 安装依赖

npm install vue-i18n@9
# 或
yarn add vue-i18n@9

---

2. 配置 i18n 实例

创建 src/i18n/index.js 文件：

import { createI18n } from 'vue-i18n';

// 加载语言文件
const messages = {
  en: {
    welcome: 'Welcome',
    button: {
      submit: 'Submit',
      cancel: 'Cancel'
    }
  },
  zh: {
    welcome: '欢迎',
    button: {
      submit: '提交',
      cancel: '取消'
    }
  }
};

const i18n = createI18n({
  legacy: false, // 使用 Composition API 模式
  locale: 'en', // 默认语言
  fallbackLocale: 'en', // 回退语言
  messages
});

export default i18n;

---

3. 在 main.js 中引入

import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n';

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

---

4. 在组件中使用

模板中使用 $t 方法：

<template>
  <h1>{{ $t('welcome') }}</h1>
  <button>{{ $t('button.submit') }}</button>
</template>

组合式 API 中使用 useI18n：

<script setup>
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
console.log(t('welcome'));
</script>

选项式 API 中使用 this.$i18n：

<script>
export default {
  methods: {
    showMessage() {
      console.log(this.$i18n.t('welcome'));
    }
  }
}
</script>

---

5. 动态切换语言

<template>
  <select v-model="selectedLocale" @change="changeLanguage">
    <option value="en">English</option>
    <option value="zh">中文</option>
  </select>
</template>

<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

const { locale } = useI18n();
const selectedLocale = ref(locale.value);

const changeLanguage = () => {
  locale.value = selectedLocale.value;
};
</script>

---

6. 按需加载语言文件（优化）

如果翻译文件较大，可以异步加载语言包：

// i18n/index.js
async function loadLocaleMessages(locale) {
  const response = await fetch(`./locales/${locale}.json`);
  return response.json();
}

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  fallbackLocale: 'en',
  messages: {}
});

// 动态加载语言
export async function setLocale(lang) {
  if (!i18n.global.availableLocales.includes(lang)) {
    const messages = await loadLocaleMessages(lang);
    i18n.global.setLocaleMessage(lang, messages);
  }
  i18n.global.locale.value = lang;
}

export default i18n;

---

7. 处理复数与格式化

使用 $tc 处理复数：

// 语言文件
{
  "apple": "no apples | one apple | {count} apples"
}

// 使用方式
$tc('apple', 5) // 输出 "5 apples"

---

最佳实践

1. 分离语言文件：将每种语言单独放在 locales 目录下的 JSON 文件中。
2. 模块化翻译：按功能拆分翻译内容，避免单一文件过大。
3. 默认回退：设置合理的 fallbackLocale 防止翻译缺失。
4. TypeScript 支持：为翻译键名定义类型提示（需配置 @intlify/vue-i18n-loader）。

通过以上步骤，即可在 Vue3 项目中实现灵活的多语言支持。