Vue I18n 在项目中的魔法之旅：从代码到多语言切换 ✨

🌍 Vue I18n 在项目中的魔法之旅：从代码到多语言切换 ✨

嗨，大家好！今天我们来聊聊如何在 Vue 项目中实现国际化（也就是 I18n，全称 Internationalization），以我最近分析的一个项目为例，带你走进 Vue I18n 的世界！这个项目用到了 LangSelect 和 LangRadio 组件，配合 Vuex 和 cookie，实现了一个优雅的多语言切换方案。准备好了吗？让我们开始吧！🚀

---

🛠️ 项目背景：多语言需求

在这个项目中（路径 spid-admin），我们需要支持中文 (zh)、英文 (en) 和日文 (ja) 三种语言。用户可以通过下拉菜单（LangSelect）或图片点击（LangRadio）切换语言，切换后界面要实时更新，还要记住用户的选择（下次打开依然生效）。听起来是不是有点复杂？别担心，我们一步步拆解！😎

---

📦 Vue I18n：国际化核心插件

首先，Vue I18n 是啥？它是一个专门为 Vue.js 设计的插件 🎨，全称是 Internationalization（缩写为 “I18n”，因为首字母 “I” 和末字母 “n” 之间有 18 个字母）。它的作用是让你的应用支持多种语言，比如翻译文本、调整格式等。项目中用的是 vue-i18n@8.28.2（适用于 Vue 2），通过 Yarn 安装：

yarn list --pattern vue-i18n
└─ vue-i18n@8.28.2

它的核心任务是：

• 定义翻译资源（messages）。
• 设置当前语言（locale）。
• 提供 $i18n 接口给组件使用。

---

🏗️ 配置起点：main.ts 和 @/lang

1️⃣ main.ts：全局挂载

在 main.ts 中，Vue I18n 被引入并挂载到根实例：

import Vue from 'vue'
import i18n from '@/lang'
new Vue({
  router,
  store,
  i18n, // 挂载 i18n 实例
  render: (h) => h(App)
}).$mount('#app')

这里没有直接看到 Vue.use(VueI18n)，但别慌，它被封装到了 @/lang 文件中！🔍

2️⃣ @/lang/index.ts：核心配置

真正的魔法发生在 @/lang/index.ts：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: getLanguage() || 'zh',
  messages: {
    zh: { ...zhLocale, ...elementZhLocale },
    en: { ...enLocale, ...elementZhLocale },
    ja: { ...jaLocale, ...elementZhLocale }
  }
})
export default i18n

• Vue.use(VueI18n)：注册插件，让 $i18n 全局可用。
• locale：初始语言，从 cookie 或默认 'zh' 获取。
• messages：定义了多语言资源。

---

🖱️ 切换语言：LangSelect 和 LangRadio

项目中有两个组件负责语言切换：

1️⃣ LangSelect：下拉菜单风格

private handleSetLanguage(lang: string) {
  this.$i18n.locale = lang
  AppModule.SetLanguage(lang)
  this.$message({ message: 'Switch Language Success', type: 'success' })
}

• 显示一个下拉菜单，用户选择后更新 $i18n.locale 并保存到 Vuex。

2️⃣ LangRadio：图片点击风格

private handleSetLanguage(lang: string) {
  this.$i18n.locale = lang
  AppModule.SetLanguage(lang)
  window.location.reload()
}

• 用图片表示语言，点击后更新并刷新页面。

区别：LangSelect 只提示成功，LangRadio 刷新页面以确保所有内容更新。

---

💾 状态管理：AppModule 和 Cookie

1️⃣ AppModule：Vuex 模块

在 @/store/modules/app.ts 中：

@Module({ dynamic: true, store, name: 'app' })
class App extends VuexModule {
  public language = getLocale()
  @Mutation
  private SET_LANGUAGE(language: string) {
    this.language = language
    setLanguage(this.language)
  }
  @Action
  public SetLanguage(language: string) {
    this.SET_LANGUAGE(language)
  }
}
export const AppModule = getModule(App)

• 管理 language 状态。
• SetLanguage 更新状态并调用 setLanguage 保存到 cookie。

2️⃣ @/utils/cookies.ts：持久化存储

const languageKey = 'language'
export const getLanguage = () => Cookies.get(languageKey)
export const setLanguage = (language: string) => Cookies.set(languageKey, language)

• 用 js-cookie 读写 language 键，实现语言持久化。

---

🚀 工作流程图

下面是一个 Mermaid 流程图，展示语言切换的完整过程：

1. 用户点击语言选项。
2. 更新 $i18n.locale 和 Vuex 状态。
3. 保存到 cookie。
4. 下次加载时恢复语言。

---

🎨 总结思维导图

最后，用 Mermaid 思维导图整理整个结构：

---

🌟 收获与反思

通过这次分析，我发现：

• Vue I18n 的强大：只需配置 locale 和 messages，就能实现多语言切换！💪 “Internationalization”（I18n）真是开发者的好帮手！
• 模块化设计：AppModule 和 cookie 的配合让状态管理井井有条。
• 改进空间：@/lang 中 elementZhLocale 被重复合并到 en 和 ja，建议引入各自的语言包。

希望这篇博客能帮你理清 Vue I18n 的工作原理！如果有问题，欢迎留言讨论哦！😄