在 Vue 项目中使用 **i18n（国际化）** 是非常常见的需求，尤其是在多语言网站或应用中。Vue 官方推荐使用的国际化插件是 [`vue-i18n`](https://vue-i18n.intlify.dev/)。（点击vur-i18n跳转官网） --- ## 🌍 一、什么是 i18n？ i18n 是 “internationalization” 的缩写（首字母 i + 中间18个字母 + 尾字母 n），意思是“国际化”。它指的是让应用程序支持多种语言的能力。 --- ## 📦 二、安装 vue-i18n 插件 ```bash npm install vue-i18n ``` 或者使用 yarn： ```bash yarn add vue-i18n ``` --- ## 🔧 三、基本使用步骤（Vue 3 + Composition API） ### 1. 创建 i18n 实例通常我们会将 i18n 配置单独放在一个文件中，比如 `src/i18n.js` 或 `src/plugins/i18n.js`。 ```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 插件 ```js // main.js import { createApp } from 'vue' import App from './App.vue' import i18n from './i18n' // 引入 i18n 实例 createApp(App).use(i18n).mount('#app') ``` --- ### 3. 在组件中使用翻译内容 #### ✅ 模板中直接使用 `$t` ```vue ``` #### ✅ 在 script setup / composition API 中使用 ```vue ``` --- ## 🌐 四、切换语言示例你可以在组件中动态切换语言： ```vue ``` --- ## 📁 五、进阶：按模块拆分语言包你可以把语言包按模块拆分成多个文件，例如： ``` locales/ ├── en.json └── zh.json ``` 然后在 `i18n.js` 中导入： ```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'` | ---

{{ $t('greeting') }}