Vue 3 国际化和本地化进阶

概述

国际化（Internationalization，简称 i18n）和本地化（Localization，简称 l10n）是现代 Web 应用开发中的重要组成部分。它们允许应用支持多种语言和地区，为全球用户提供更好的体验。在 Vue 3 中，我们可以使用专门的库如 vue-i18n 来实现强大的国际化功能。本教程将深入探讨 Vue 3 中的国际化和本地化进阶技术。

核心知识

1. 国际化与本地化基础

国际化（i18n）：设计和开发应用，使其能够轻松适应不同的语言和地区，而无需对代码进行重大修改
本地化（l10n）：将国际化的应用适配到特定的语言和地区，包括翻译文本、调整日期格式、货币符号等
区域设置（Locale）：由语言代码和地区代码组成，如 en-US、zh-CN、fr-FR

2. Vue 3 中的 i18n 实现

Vue 3 推荐使用 vue-i18n@9.x 版本，它提供了 Composition API 支持：

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

// 导入语言包
import en from './locales/en.json'
import zh from './locales/zh.json'

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

export default i18n

3. 在应用中使用 i18n

3.1 注册 i18n 实例

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

3.2 在模板中使用

<template>
  <div>
    <h1>{{ $t('welcome') }}</h1>
    <p>{{ $t('greeting', { name: 'Vue 3' }) }}</p>
  </div>
</template>

3.3 在 Composition API 中使用

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

const { t, locale } = useI18n()

const changeLocale = (newLocale) => {
  locale.value = newLocale
  localStorage.setItem('locale', newLocale)
}
</script>

<template>
  <div>
    <h1>{{ t('welcome') }}</h1>
    <button @click="changeLocale('en')">English</button>
    <button @click="changeLocale('zh')">中文</button>
  </div>
</template>

4. 语言包管理

4.1 JSON 格式语言包

// src/i18n/locales/en.json
{
  "welcome": "Welcome to Vue 3 i18n",
  "greeting": "Hello, {name}!",
  "menu": {
    "home": "Home",
    "about": "About",
    "contact": "Contact"
  },
  "message": {
    "count": "You have {count} messages"
  }
}

4.2 嵌套翻译键

<template>
  <nav>
    <ul>
      <li>{{ $t('menu.home') }}</li>
      <li>{{ $t('menu.about') }}</li>
      <li>{{ $t('menu.contact') }}</li>
    </ul>
  </nav>
</template>

5. 复数形式处理

5.1 基本复数形式

// src/i18n/locales/en.json
{
  "message": {
    "count": "{count} message | {count} messages"
  }
}

<template>
  <p>{{ $tc('message.count', 1) }}</p> <!-- 1 message -->
  <p>{{ $tc('message.count', 5) }}</p> <!-- 5 messages -->
</template>

5.2 高级复数规则

// src/i18n/index.js
const i18n = createI18n({
  legacy: false,
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en: {
      apple: 'no apples | one apple | {count} apples'
    }
  },
  pluralizationRules: {
    /**
     * @param {number} choice - 选择索引 (从 0 开始)
     * @param {number} choicesLength - 选择总数
     * @returns {number} 最终选择索引
     */
    en: (choice, choicesLength) => {
      if (choicesLength === 1) return 0
      if (choice === 0) return 0
      if (choice === 1) return 1
      return 2
    }
  }
})

6. 日期、时间和数字本地化

6.1 日期格式化

// src/i18n/index.js
const i18n = createI18n({
  legacy: false,
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    // ...
  },
  datetimeFormats: {
    en: {
      short: {
        year: 'numeric',
        month: 'short',
        day: 'numeric'
      },
      long: {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long',
        hour: '2-digit',
        minute: '2-digit'
      }
    },
    zh: {
      short: {
        year: 'numeric',
        month: 'short',
        day: 'numeric'
      },
      long: {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long',
        hour: '2-digit',
        minute: '2-digit'
      }
    }
  }
})

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

const { d } = useI18n()
const today = new Date()
</script>

<template>
  <p>{{ d(today, 'short') }}</p> <!-- 12/25/2023 -->
  <p>{{ d(today, 'long') }}</p> <!-- Monday, December 25, 2023 at 10:30 AM -->
</template>

6.2 数字格式化

// src/i18n/index.js
const i18n = createI18n({
  legacy: false,
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    // ...
  },
  numberFormats: {
    en: {
      currency: {
        style: 'currency',
        currency: 'USD'
      },
      decimal: {
        style: 'decimal',
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      },
      percent: {
        style: 'percent',
        minimumFractionDigits: 1
      }
    },
    zh: {
      currency: {
        style: 'currency',
        currency: 'CNY'
      },
      decimal: {
        style: 'decimal',
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      },
      percent: {
        style: 'percent',
        minimumFractionDigits: 1
      }
    }
  }
})

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

const { n } = useI18n()
</script>

<template>
  <p>{{ n(12345.67, 'currency') }}</p> <!-- $12,345.67 -->
  <p>{{ n(0.123, 'percent') }}</p> <!-- 12.3% -->
</template>

7. 翻译上下文

翻译上下文用于区分相同键在不同上下文中的翻译：

// src/i18n/locales/en.json
{
  "apple": "apple",
  "apple_:fruit": "apple (fruit)",
  "apple_:company": "Apple Inc."
}

<template>
  <p>{{ $t('apple', { context: 'fruit' }) }}</p> <!-- apple (fruit) -->
  <p>{{ $t('apple', { context: 'company' }) }}</p> <!-- Apple Inc. -->
</template>

最佳实践

1. 翻译键命名规范

使用语义化的键名，避免使用硬编码文本
采用模块化命名，如 home.title、about.description
保持键名的一致性和可维护性

2. 语言包管理

将语言包存放在单独的 JSON 文件中
按功能模块组织翻译键
使用工具（如 i18n-ally VS Code 插件）管理翻译

3. 性能优化

懒加载语言包，减少初始加载时间
使用动态导入加载大型语言包
避免在模板中使用复杂的翻译逻辑

// src/i18n/index.js
const i18n = createI18n({
  legacy: false,
  locale: 'zh',
  fallbackLocale: 'en',
  messages: {
    zh: () => import('./locales/zh.json'),
    en: () => import('./locales/en.json')
  }
})

4. 回退机制

设置合理的回退语言
处理缺失的翻译键
提供清晰的错误提示

5. 动态语言切换

将当前语言存储在 localStorage 中
实现语言切换组件
确保所有组件都能响应语言变化

<!-- src/components/LocaleSwitcher.vue -->
<script setup>
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()
const locales = [
  { code: 'en', name: 'English' },
  { code: 'zh', name: '中文' }
]

const changeLocale = (newLocale) => {
  locale.value = newLocale
  localStorage.setItem('locale', newLocale)
}
</script>

<template>
  <div class="locale-switcher">
    <button
      v-for="loc in locales"
      :key="loc.code"
      @click="changeLocale(loc.code)"
      :class="{ active: locale === loc.code }"
    >
      {{ loc.name }}
    </button>
  </div>
</template>

常见问题与解决方案

1. 问题：翻译键不生效

解决方案：

检查翻译键是否存在于当前语言包中
确保 legacy: false 配置正确（使用 Composition API 时）
检查 i18n 实例是否正确注册

2. 问题：语言切换后部分组件未更新

解决方案：

确保所有组件都使用了 useI18n() 钩子或 $t 函数
检查组件是否正确响应了 locale 变化
避免在 setup 函数中缓存翻译结果

3. 问题：复数形式处理不正确

解决方案：

检查复数规则是否符合目标语言的语法
确保使用了正确的复数函数 $tc（Legacy API）或配置了复数规则（Composition API）
参考 Unicode CLDR 复数规则

4. 问题：日期时间格式化不符合预期

解决方案：

检查 datetimeFormats 配置是否正确
确保使用了合适的区域设置
参考 Intl.DateTimeFormat 文档

5. 问题：语言包过大导致加载缓慢

解决方案：

实现语言包的懒加载
按功能模块拆分语言包
使用 CDN 加速语言包加载

高级学习资源

1. 官方文档

2. 工具和插件

i18n-ally：VS Code 翻译管理插件
FormatJS：国际化格式化库
Lokalise：翻译管理平台
Crowdin：本地化管理平台

3. 最佳实践指南

实践练习

练习 1：基本 i18n 实现

创建一个 Vue 3 项目
安装并配置 vue-i18n@9.x
创建英文和中文语言包
实现基本的翻译功能

练习 2：复数和上下文

实现复数形式的翻译
为相同键添加不同上下文的翻译
测试不同场景下的翻译效果

练习 3：日期、时间和数字本地化

配置日期和时间格式化规则
配置数字和货币格式化规则
在组件中使用格式化功能

练习 4：语言切换和持久化

实现语言切换组件
将当前语言存储到 localStorage
实现语言包的懒加载

练习 5：高级功能实现

实现动态加载翻译内容
为应用添加 RTL（从右到左）支持
集成 i18n-ally 插件管理翻译

总结

国际化和本地化是现代 Web 应用的重要组成部分，特别是对于面向全球用户的应用。Vue 3 结合 vue-i18n@9.x 提供了强大的国际化支持，包括 Composition API 集成、复数形式处理、日期时间格式化等功能。

本教程介绍了 Vue 3 国际化和本地化的核心概念、实现方法和最佳实践。通过学习这些内容，你可以构建支持多语言的 Vue 3 应用，为全球用户提供更好的体验。

在实际开发中，你还需要考虑翻译管理、性能优化、回退机制等问题。通过遵循最佳实践和使用合适的工具，你可以高效地管理应用的国际化需求，确保应用在不同语言环境下都能正常工作。