多语言切换-国际化插件vue-i18n

在 Vue 项目中使用 i18n（国际化） 是非常常见的需求，尤其是在多语言网站或应用中。Vue 官方推荐使用的国际化插件是 vue-i18n。（点击vur-i18n跳转官网）

---

🌍 一、什么是 i18n？

i18n 是 "internationalization" 的缩写（首字母 i + 中间18个字母 + 尾字母 n），意思是"国际化"。它指的是让应用程序支持多种语言的能力。

---

📦 二、安装 vue-i18n 插件

npm install vue-i18n

或者使用 yarn：

yarn add vue-i18n

---

🔧 三、基本使用步骤（Vue 3 + Composition API）

1. 创建 i18n 实例

通常我们会将 i18n 配置单独放在一个文件中，比如 src/i18n.js 或 src/plugins/i18n.js。

// src/i18n.js
import { createI18n } from 'vue-i18n'

// 定义语言包
const messages = {
  en: {
    greeting: 'Hello, welcome to my app!',
    button: {
      submit: 'Submit'
    }
  },
  zh: {
    greeting: '你好，欢迎使用本应用！',
    button: {
      submit: '提交'
    }
  }
}

export default createI18n({
  legacy: false, // 使用 composition API 模式
  locale: 'zh',  // 默认语言
  fallbackLocale: 'en', // 回退语言
  globalInjection: true, // 全局注入 $t 方法
  messages
})

---

2. 在 main.js 中注册 i18n 插件

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n' // 引入 i18n 实例

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

---

3. 在组件中使用翻译内容

✅ 模板中直接使用 $t

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

✅ 在 script setup / composition API 中使用

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

const { t } = useI18n()

function sayHello() {
  alert(t('greeting'))
}
</script>

<template>
  <button @click="sayHello">Say Hello</button>
</template>

---

🌐 四、切换语言示例

你可以在组件中动态切换语言：

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

const { locale } = useI18n()

function changeLang(lang) {
  locale.value = lang
}
</script>

<template>
  <button @click="changeLang('zh')">中文</button>
  <button @click="changeLang('en')">English</button>
</template>

---

📁 五、进阶：按模块拆分语言包

你可以把语言包按模块拆分成多个文件，例如：

locales/
├── en.json
└── zh.json

然后在 i18n.js 中导入：

import en from './locales/en.json'
import zh from './locales/zh.json'

const messages = { en, zh }

export default createI18n({ ... })

---

🧩 六、配合路由实现自动切换语言（可选）

如果你使用了 vue-router，可以结合 URL 路径来切换语言，比如 /zh/home 和 /en/home，并根据路径设置 locale。

---

🧪 七、完整项目结构示例

src/
├── i18n.js
├── locales/
│   ├── en.json
│   └── zh.json
├── components/
├── views/
└── main.js

---

🎯 八、常见问题解答

问题	解决方法
$t is not defined	确保在 i18n.js 中设置了 globalInjection: true
切换语言不生效	确保你在 setup() 中正确使用了 useI18n().locale.value
语言包太大怎么办？	可以按需加载语言包（懒加载）
支持复数、日期、数字格式化吗？	vue-i18n 支持 ICU MessageFormat，功能非常强大

---

✅ 九、总结

步骤	内容
1️⃣	安装 vue-i18n
2️⃣	创建 i18n 实例并配置语言包
3️⃣	注册到 Vue 应用中 .use(i18n)
4️⃣	在模板中使用 {{ $t('key') }}
5️⃣	在 JS 中使用 useI18n().t('key')
6️⃣	动态切换语言 locale.value = 'zh'

---