Vue 3 国际化与本地化

概述

国际化（Internationalization，简称i18n）和本地化（Localization，简称l10n）是构建面向全球用户的Vue 3应用的重要组成部分。国际化是指设计和开发应用，使其能够轻松适应不同语言和地区的过程；本地化则是将应用适配到特定语言和地区的过程。本集将深入探讨Vue 3的国际化解决方案，包括vue-i18n-next库的使用方法、语言包管理、翻译键命名规范、动态内容处理以及RTL（从右到左）支持，帮助你构建支持多语言的Vue 3应用。

核心知识点

1. Vue I18n 简介

Vue I18n是Vue官方提供的国际化库，专为Vue应用设计，支持Vue 3。它提供了以下功能：

• 文本翻译
• 复数形式处理
• 日期时间格式化
• 数字格式化
• 货币格式化
• 支持多种语言环境
• 支持组件内翻译
• 支持Composition API
• 支持动态加载语言包

2. 安装与配置

安装

# 安装vue-i18n-next
npm install vue-i18n@next

基本配置

创建src/i18n/index.ts：

import { createI18n } from 'vue-i18n'

// 语言包
const messages = {
  en: {
    hello: 'Hello',
    welcome: 'Welcome to Vue 3',
    user: {
      name: 'Name',
      email: 'Email',
      age: 'Age'
    }
  },
  zh: {
    hello: '你好',
    welcome: '欢迎使用Vue 3',
    user: {
      name: '姓名',
      email: '邮箱',
      age: '年龄'
    }
  }
}

// 创建i18n实例
const i18n = createI18n({
  legacy: false, // 使用Composition API
  locale: 'zh', // 默认语言
  fallbackLocale: 'en', // 回退语言
  messages // 语言包
})

export default i18n

在main.ts中引入并使用：

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'

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

3. 基本使用

在模板中使用

<template>
  <div>
    <!-- 基本使用 -->
    <h1>{{ t('hello') }}</h1>
    <p>{{ t('welcome') }}</p>
    
    <!-- 嵌套键 -->
    <div>
      <label>{{ t('user.name') }}:</label>
      <input type="text">
    </div>
    <div>
      <label>{{ t('user.email') }}:</label>
      <input type="email">
    </div>
    
    <!-- 带参数的翻译 -->
    <p>{{ t('greeting', { name: 'John' }) }}</p>
    
    <!-- 切换语言 -->
    <button @click="switchLanguage('en')">English</button>
    <button @click="switchLanguage('zh')">中文</button>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n()

const switchLanguage = (lang: string) => {
  locale.value = lang
}
</script>

语言包中添加带参数的翻译：

const messages = {
  en: {
    greeting: 'Hello, {name}!'
  },
  zh: {
    greeting: '你好，{name}！'
  }
}

在JavaScript中使用

import { useI18n } from 'vue-i18n'

const { t, locale, availableLocales } = useI18n()

// 获取当前语言
console.log(locale.value) // 'zh'

// 获取可用语言列表
console.log(availableLocales.value) // ['en', 'zh']

// 翻译文本
const greeting = t('greeting', { name: 'John' })
console.log(greeting) // '你好，John！'

4. 高级特性

复数形式

const messages = {
  en: {
    apple: 'no apples | one apple | {count} apples'
  },
  zh: {
    apple: '没有苹果 | 一个苹果 | {count} 个苹果'
  }
}

使用复数形式：

<template>
  <div>
    <p>{{ t('apple', { count: 0 }) }}</p> <!-- 没有苹果 -->
    <p>{{ t('apple', { count: 1 }) }}</p> <!-- 一个苹果 -->
    <p>{{ t('apple', { count: 5 }) }}</p> <!-- 5 个苹果 -->
  </div>
</template>

日期时间格式化

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  legacy: false,
  locale: 'zh',
  fallbackLocale: 'en',
  messages: {
    en: {
      date: 'Date: {0, date}',
      time: 'Time: {0, time}',
      datetime: 'DateTime: {0, datetime}'
    },
    zh: {
      date: '日期：{0, date}',
      time: '时间：{0, time}',
      datetime: '日期时间：{0, datetime}'
    }
  },
  // 日期时间格式选项
  datetimeFormats: {
    en: {
      short: {
        year: 'numeric',
        month: 'short',
        day: 'numeric'
      },
      long: {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long',
        hour: 'numeric',
        minute: 'numeric'
      }
    },
    zh: {
      short: {
        year: 'numeric',
        month: 'short',
        day: 'numeric'
      },
      long: {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long',
        hour: 'numeric',
        minute: 'numeric'
      }
    }
  }
})

使用日期时间格式化：

<template>
  <div>
    <p>{{ t('date', new Date()) }}</p> <!-- 日期：2023年1月1日 -->
    <p>{{ t('time', new Date()) }}</p> <!-- 时间：上午10:30:00 -->
    <p>{{ t('datetime', new Date()) }}</p> <!-- 日期时间：2023年1月1日 星期日 上午10:30:00 -->
    
    <!-- 自定义格式 -->
    <p>{{ $d(new Date(), 'short') }}</p> <!-- 2023/1/1 -->
    <p>{{ $d(new Date(), 'long') }}</p> <!-- 2023年1月1日 星期日 -->
  </div>
</template>

数字格式化

const i18n = createI18n({
  legacy: false,
  locale: 'zh',
  fallbackLocale: 'en',
  // 数字格式选项
  numberFormats: {
    en: {
      currency: {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2
      },
      percent: {
        style: 'percent',
        minimumFractionDigits: 2
      }
    },
    zh: {
      currency: {
        style: 'currency',
        currency: 'CNY',
        minimumFractionDigits: 2
      },
      percent: {
        style: 'percent',
        minimumFractionDigits: 2
      }
    }
  }
})

使用数字格式化：

<template>
  <div>
    <!-- 货币格式化 -->
    <p>{{ $n(100, 'currency') }}</p> <!-- ¥100.00 -->
    
    <!-- 百分比格式化 -->
    <p>{{ $n(0.15, 'percent') }}</p> <!-- 15.00% -->
    
    <!-- 自定义格式 -->
    <p>{{ $n(1234567.89, { maximumFractionDigits: 0 }) }}</p> <!-- 1,234,568 -->
  </div>
</template>

5. 组件内使用

单文件组件中的使用

<template>
  <div>
    <h1>{{ t('title') }}</h1>
    <p>{{ t('description') }}</p>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n({
  // 组件级别的语言包
  messages: {
    en: {
      title: 'Component Title',
description: 'Component Description'
    },
    zh: {
      title: '组件标题',
description: '组件描述'
    }
  }
})
</script>

与Composition API集成

import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'

export function useTranslation() {
  const { t, locale } = useI18n()
  
  const currentLocale = computed(() => locale.value)
  
  const changeLocale = (lang: string) => {
    locale.value = lang
  }
  
  return {
    t,
    currentLocale,
    changeLocale
  }
}

在组件中使用：

<script setup lang="ts">
import { useTranslation } from './composables/useTranslation'

const { t, currentLocale, changeLocale } = useTranslation()
</script>

6. 动态加载语言包

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

const i18n = createI18n({
  legacy: false,
  locale: 'zh',
  fallbackLocale: 'en',
  messages: {
    // 只加载默认语言
    zh: {
      hello: '你好'
    }
  }
})

// 动态加载语言包
export async function loadLanguage(lang: string) {
  // 如果语言已经加载，直接返回
  if (i18n.global.availableLocales.includes(lang)) {
    i18n.global.locale.value = lang
    return
  }
  
  // 动态导入语言包
  const messages = await import(`./locales/${lang}.ts`)
  i18n.global.setLocaleMessage(lang, messages.default)
  i18n.global.locale.value = lang
}

export default i18n

语言包文件结构：

src/
├── i18n/
│   ├── index.ts
│   └── locales/
│       ├── en.ts
│       └── zh.ts

locales/en.ts：

export default {
  hello: 'Hello',
  welcome: 'Welcome to Vue 3'
}

7. 与Vue Router结合

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/HomeView.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

在App.vue中实现多语言路由：

<template>
  <div>
    <nav>
      <router-link :to="`/${currentLocale}/`">{{ t('home') }}</router-link>
      <router-link :to="`/${currentLocale}/about`">{{ t('about') }}</router-link>
    </nav>
    <router-view />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'

const route = useRoute()
const router = useRouter()
const { t, locale } = useI18n()

const currentLocale = computed(() => {
  // 从路由中获取语言
  const lang = route.params.lang as string
  if (['en', 'zh'].includes(lang)) {
    locale.value = lang
    return lang
  }
  // 默认语言
  return locale.value
})

// 监听语言变化，更新路由
watch(locale, (newLang) => {
  const path = route.path.replace(new RegExp(`^/${currentLocale.value}`), `/${newLang}`)
  router.push(path)
})
</script>

最佳实践

1. 语言包管理：

   • 按功能模块组织语言包
   • 使用动态导入减少初始加载体积
   • 定期检查未使用的翻译键
   • 使用版本控制管理语言包

2. 翻译键命名规范：

   • 使用语义化的键名
   • 避免使用长键名
   • 使用点分隔符组织嵌套结构
   • 保持键名的一致性

3. 动态内容处理：

   • 使用参数化翻译处理动态内容
   • 避免在翻译键中包含变量
   • 对于复杂的动态内容，使用组件插槽

4. RTL（从右到左）支持：

   • 使用CSS变量处理RTL布局
   • 为RTL语言提供专用样式
   • 使用dir属性设置文本方向

5. 翻译工作流：

   • 与翻译团队建立良好的沟通渠道
   • 使用专业的翻译管理工具
   • 建立翻译审核流程
   • 定期更新和维护翻译内容

6. 性能优化：

   • 只加载当前语言的翻译
   • 使用动态导入按需加载语言包
   • 避免在模板中频繁调用翻译函数
   • 使用缓存优化翻译查找

常见问题与解决方案

1. 语言切换时组件不更新

问题：切换语言后，某些组件的翻译内容没有更新

解决方案：

• 确保使用了useI18n钩子
• 检查组件是否正确响应了语言变化
• 对于深层嵌套的组件，考虑使用事件总线或状态管理

2. 动态内容翻译

问题：如何翻译动态生成的内容

解决方案：

• 使用参数化翻译
• 为动态内容定义翻译键
• 使用$t或t函数在运行时翻译

3. 复数形式处理

问题：如何处理不同语言的复数形式

解决方案：

• 使用vue-i18n的复数形式语法
• 了解不同语言的复数规则
• 为特殊语言提供自定义复数规则

4. 日期时间格式

问题：如何处理不同地区的日期时间格式

解决方案：

• 使用vue-i18n的日期时间格式化
• 定义不同语言的日期时间格式选项
• 考虑时区问题

5. RTL支持

问题：如何支持从右到左的语言（如阿拉伯语、希伯来语）

解决方案：

• 设置dir属性
• 使用CSS变量处理RTL布局
• 为RTL语言提供专用样式
• 测试RTL语言的显示效果

6. 翻译管理

问题：如何管理大量的翻译内容

解决方案：

• 使用翻译管理工具（如Lokalise、POEditor）
• 建立翻译工作流
• 定期检查翻译质量
• 使用自动化工具检查缺失的翻译

进一步学习资源

1. Vue I18n 官方文档
2. Vue I18n GitHub 仓库
3. Internationalization (i18n) - MDN
4. FormatJS
5. i18n 最佳实践
6. RTL 设计指南

课后练习

1. 练习1：基本国际化实现

   • 安装并配置vue-i18n-next
   • 创建中英文语言包
   • 实现基本的翻译功能
   • 实现语言切换功能

2. 练习2：高级特性使用

   • 实现复数形式翻译
   • 实现日期时间格式化
   • 实现数字格式化
   • 实现货币格式化

3. 练习3：组件级国际化

   • 创建一个组件，实现组件级别的国际化
   • 实现组件内的语言包
   • 测试组件在不同语言下的显示效果

4. 练习4：动态加载语言包

   • 实现语言包的动态加载
   • 测试不同语言包的加载效果
   • 优化语言包加载性能

5. 练习5：与Vue Router结合

   • 实现多语言路由
   • 测试路由在不同语言下的跳转
   • 实现路由参数的国际化

6. 练习6：国际化最佳实践

   • 组织语言包结构
   • 实现翻译键命名规范
   • 实现RTL支持
   • 优化国际化性能

通过本集的学习，你应该对Vue 3的国际化与本地化有了全面的了解。国际化是构建面向全球用户的Vue 3应用的重要组成部分，合理使用vue-i18n-next库，结合最佳实践，可以帮助你构建高质量的多语言应用。