Vue国际化Vue-i18n

🌍 一、什么是 Vue i18n？

Vue i18n 是 Vue 官方团队（尤雨溪团队）开发的国际化插件：

📦 vue-i18n 是一个支持多语言的插件，能让你在前端项目中轻松切换不同语言的文本内容。

它支持：

多语言文本切换（中文/英文/日文...）；
日期/时间/货币格式化；
占位符替换（如用户名）；
动态加载语言包；
支持 Composition API 和 Options API。

🏗️ 二、前端开发国际化的基本步骤（以 Vue 3 为例）

✅ 1. 安装依赖

npm install vue-i18n@9

Vue 3 用的是 vue-i18n@9+（基于 Composition API）

✅ 2. 配置语言文件

建立一个语言目录，如 /src/locales/

// src/locales/en.js
export default {
  greeting: 'Hello, {name}!',
  welcome: 'Welcome to our site',
}

// src/locales/zh.js
export default {
  greeting: '你好，{name}！',
  welcome: '欢迎访问我们的网站',
}

✅ 3. 创建 i18n 实例

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

const i18n = createI18n({
  locale: 'zh', // 默认语言
  fallbackLocale: 'en',
  messages: {
    en,
    zh,
  },
})

export default i18n

✅ 4. 挂载到 app 中

// 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')

✅ 5. 使用 i18n（模板里 or 组合式 API）

📄 模板中使用：

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

🧠 Script 中使用：

import { useI18n } from 'vue-i18n'

export default {
  setup() {
    const { t } = useI18n()
    return { t }
  }
}

✅ 6. 带参数的占位符

$t('greeting', { name: 'Alice' })
// 输出：你好，Alice！

✅ 7. 动态切换语言

import { useI18n } from 'vue-i18n'

setup() {
  const { locale } = useI18n()
  const switchLang = () => {
    locale.value = locale.value === 'zh' ? 'en' : 'zh'
  }
  return { switchLang }
}

🧩 三、组件级国际化（按需加载）

当项目变大，语言包非常庞大时可以做懒加载或模块化：

// 动态加载语言文件
const loadLocale = async (lang) => {
  const messages = await import(`../locales/${lang}.js`)
  i18n.global.setLocaleMessage(lang, messages.default)
  i18n.global.locale = lang
}

🧪 四、前端 i18n 实践技巧

技巧	建议
✅ 使用 key 命名规范	如：`page.home.title`, `user.login.error`
✅ 所有文案用 key 引用，不写死	特别是按钮、菜单、弹窗标题等
✅ 支持 fallback（后备语言）	避免语言缺失时崩溃
✅ 配合 JSON 编辑工具	多语言翻译统一导入导出
✅ 开发时默认语言保持一致	避免切换状态调试困难

📚 补充工具推荐

工具/库	用途
vue-i18n-extract	检查未使用/缺失的语言 key
i18next + vue-i18next	更强大的国际化方案（跨框架）
crowdin / locize	团队协同翻译平台

🎯 总结

你要做的	怎么做
多语言支持	使用 `vue-i18n` 插件
全站文案国际化	所有文字用 `$t('key')` 调用
动态语言切换	修改 `i18n.global.locale` 即可
大项目优化	拆分语言包 + 懒加载