发布于 由admin

阐述 Vue 应用中如何实现一个可扩展的国际化 (i18n) 和本地化 (l10n) 方案。

各位观众，欢迎来到今天的“Vue 应用国际化和本地化实战讲座”！我是你们的老朋友，今天咱们就来聊聊如何给你的 Vue 应用穿上不同国家的“衣服”，让它能说不同国家的“话”。

一、开场白：国际化的重要性，不仅仅是翻译

想象一下，你的 App 火遍全球，用户遍布五湖四海，结果所有人都只能看到英文界面，用着美元结算，是不是有点可惜？ 国际化 (i18n) 和本地化 (l10n) 不仅仅是翻译文本那么简单，还包括货币、日期、时间、数字格式，甚至是文化习惯的适配。一个好的 i18n/l10n 方案能让你的应用更受欢迎，用户体验更上一层楼。

二、Vue i18n 方案概览：选择适合你的“翻译官”

在 Vue 的世界里，有很多 i18n 的解决方案，其中最流行的莫过于 vue-i18n 了。 还有其他的选择，比如 i18next 配合 vue-i18next，或者自己手撸一个简单的实现。

方案 优点 缺点 适用场景
vue-i18n 成熟稳定，社区活跃，功能丰富，易于上手，与 Vue 生态结合紧密。 包体积相对较大，配置稍显繁琐。 大中型项目，需要较全面的 i18n 功能。
i18next 灵活性高，支持多种框架和平台，可扩展性强。 配置较为复杂，学习曲线较陡峭，与 Vue 生态结合不如 vue-i18n 紧密。 需要跨平台支持，或者对 i18n 实现有较高要求的项目。
自定义方案 可以根据项目需求定制，轻量级，易于控制。 需要自己实现所有 i18n 功能，维护成本高，容易出错。 小型项目，只需要简单的 i18n 功能。

今天，我们就以 vue-i18n 为例，来深入探讨如何在 Vue 应用中实现一个可扩展的 i18n/l10n 方案。

三、vue-i18n 的安装与配置：搭建你的“翻译中心”

首先，我们需要安装 vue-i18n：

npm install vue-i18n@9
# 或者
yarn add vue-i18n@9

注意，这里推荐使用 vue-i18n@9 版本，因为它与 Vue 3 兼容。

接下来，在你的 Vue 应用入口文件（通常是 main.js 或 main.ts）中配置 vue-i18n：

// main.js 或 main.ts
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App.vue'

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

const i18n = createI18n({
  locale: 'zh', // 默认语言
  fallbackLocale: 'en', // 备用语言，当找不到翻译时使用
  messages: {
    en,
    zh,
  },
})

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

这段代码做了以下几件事：

  1. 导入了 vue-i18n 的相关函数。
  2. 导入了英文和中文的语言包（后面我们会详细介绍语言包的结构）。
  3. 创建了一个 i18n 实例，并设置了默认语言和备用语言。
  4. 将 i18n 实例注册到 Vue 应用中。

四、语言包的组织与管理：让你的“词汇表”井井有条

语言包是 i18n 的核心，它包含了不同语言的翻译文本。一个好的语言包组织方式能让你的 i18n 方案更易于维护和扩展。

通常，我们会将不同语言的语言包放在一个 locales 目录下，每个语言一个文件，文件名以语言代码命名（例如，en.json、zh.json、fr.json）。

├── src
│   ├── locales
│   │   ├── en.json
│   │   ├── zh.json
│   │   └── fr.json
│   └── ...
└── ...

语言包的结构通常是一个 JSON 对象，键是翻译的 key，值是翻译后的文本。

// en.json
{
  "greeting": "Hello, world!",
  "welcome": "Welcome to my app!",
  "button.submit": "Submit",
  "profile": {
    "name": "Name",
    "age": "Age"
  }
}

// zh.json
{
  "greeting": "你好，世界！",
  "welcome": "欢迎使用我的应用！",
  "button.submit": "提交",
  "profile": {
    "name": "姓名",
    "age": "年龄"
  }
}

可以看到，我们可以使用嵌套的 JSON 对象来组织翻译文本，这样可以更好地管理大量的翻译 key。

五、在 Vue 组件中使用 i18n：让你的组件“能说会道”

在 Vue 组件中使用 vue-i18n 非常简单，主要有两种方式：

  1. 模板中使用 $t：

    $t 是 vue-i18n 提供的一个全局方法，可以在模板中直接使用，用于获取翻译后的文本。

    <template>
  <h1>{{ $t('greeting') }}</h1>
  <p>{{ $t('welcome') }}</p>
  <button>{{ $t('button.submit') }}</button>
  <div>
    <label>{{ $t('profile.name') }}:</label>
    <input type="text" />
  </div>
  <div>
    <label>{{ $t('profile.age') }}:</label>
    <input type="number" />
  </div>
</template>

  2. 组件中使用 useI18n：

    useI18n 是 vue-i18n 提供的一个 Composition API，可以在组件的 setup 函数中使用，用于获取 i18n 实例。

    <template>
  <h1>{{ greeting }}</h1>
  <p>{{ welcome }}</p>
  <button>{{ submit }}</button>
</template>

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

const { t } = useI18n()

const greeting = computed(() => t('greeting'))
const welcome = computed(() => t('welcome'))
const submit = computed(() => t('button.submit'))
</script>

    使用 useI18n 可以更灵活地控制翻译文本的获取方式，例如，可以使用 computed 来缓存翻译结果，提高性能。

六、动态切换语言：让你的应用“随心所欲”

动态切换语言是 i18n 的一个重要功能，可以让用户根据自己的喜好选择语言。

可以使用 vue-i18n 的 locale 属性来动态切换语言：

<template>
  <div>
    <select v-model="$i18n.locale">
      <option value="en">English</option>
      <option value="zh">中文</option>
      <option value="fr">Français</option>
    </select>
    <h1>{{ $t('greeting') }}</h1>
  </div>
</template>

或者，也可以在组件中使用 useI18n 来切换语言：

<template>
  <div>
    <select v-model="currentLocale">
      <option value="en">English</option>
      <option value="zh">中文</option>
      <option value="fr">Français</option>
    </select>
    <h1>{{ $t('greeting') }}</h1>
  </div>
</template>

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

const { locale } = useI18n()
const currentLocale = ref(locale.value)

watch(currentLocale, (newLocale) => {
  locale.value = newLocale
})
</script>

这段代码使用了一个 select 元素来让用户选择语言，当用户选择不同的语言时，$i18n.locale 或 locale.value 会被更新，vue-i18n 会自动更新翻译文本。

七、参数化翻译：让你的文本“灵活多变”

有时候，我们需要在翻译文本中使用变量，例如，向用户问候时，需要使用用户的姓名。

vue-i18n 支持参数化翻译，可以使用占位符来表示变量，并在调用 $t 或 t 时传入变量的值。

// en.json
{
  "greeting": "Hello, {name}!"
}

// zh.json
{
  "greeting": "你好，{name}！"
}
<template>
  <h1>{{ $t('greeting', { name: username }) }}</h1>
</template>

<script setup>
import { ref } from 'vue'

const username = ref('张三')
</script>

或者使用 useI18n：

<template>
  <h1>{{ greeting }}</h1>
</template>

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

const { t } = useI18n()
const username = ref('李四')

const greeting = computed(() => t('greeting', { name: username.value }))
</script>

vue-i18n 会将占位符 {name} 替换为 username 的值。

八、复数化：让你的文本“因数而异”

在某些情况下，我们需要根据数量的不同使用不同的翻译文本，例如，当有 1 个苹果时，应该说 "1 apple"，当有多个苹果时，应该说 "2 apples"。

vue-i18n 支持复数化，可以使用 | 分隔不同的复数形式，并使用 pluralizationRules 选项来定义复数规则。

// en.json
{
  "apple": "apple | apples"
}

// zh.json
{
  "apple": "个苹果 | 个苹果" // 中文不需要复数
}
// main.js 或 main.ts
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App.vue'

import en from './locales/en.json'
import zh from './locales/zh.json'

const i18n = createI18n({
  locale: 'zh',
  fallbackLocale: 'en',
  messages: {
    en,
    zh,
  },
  pluralizationRules: {
    en: (choice, choicesLength) => {
      if (choice === 0) {
        return 0
      }
      const modulo100 = choice % 100
      if (modulo100 >= 11 && modulo100 <= 19) {
        return 0
      }
      const modulo10 = choice % 10
      if (modulo10 === 1) {
        return 1
      }
      if (modulo10 >= 2 && modulo10 <= 9) {
        return 0
      }
      return 0
    },
    zh: (choice, choicesLength) => {
      return 0 // 中文不需要复数
    },
  },
})

const app = createApp(App)
app.use(i18n)
app.mount('#app')
<template>
  <p>{{ $t('apple', { count: appleCount }, appleCount) }}</p>
</template>

<script setup>
import { ref } from 'vue'

const appleCount = ref(1)
</script>

vue-i18n 会根据 appleCount 的值选择不同的复数形式。

九、日期、时间和数字格式化：让你的数据“符合当地习惯”

不同的国家和地区有不同的日期、时间和数字格式，例如，美国使用 "MM/DD/YYYY" 格式，而中国使用 "YYYY/MM/DD" 格式。

vue-i18n 提供了 d、t 和 n 方法来格式化日期、时间和数字。

// en.json
{
  "date": "{date, date, short}",
  "time": "{time, time, short}",
  "number": "{number, number, compact}"
}

// zh.json
{
  "date": "{date, date, short}",
  "time": "{time, time, short}",
  "number": "{number, number, compact}"
}
<template>
  <p>Date: {{ $d(date) }}</p>
  <p>Time: {{ $t('time', { time: date }) }}</p>
  <p>Number: {{ $n(number) }}</p>
</template>

<script setup>
import { ref } from 'vue'

const date = ref(new Date())
const number = ref(1234567.89)
</script>

需要在 i18n 实例中配置 dateTimeFormats 和 numberFormats 选项：

// main.js 或 main.ts
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App.vue'

import en from './locales/en.json'
import zh from './locales/zh.json'

const i18n = createI18n({
  locale: 'zh',
  fallbackLocale: 'en',
  messages: {
    en,
    zh,
  },
  dateTimeFormats: {
    en: {
      short: {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
      },
      long: {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long',
      },
    },
    zh: {
      short: {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
      },
      long: {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long',
      },
    },
  },
  numberFormats: {
    en: {
      currency: {
        style: 'currency',
        currency: 'USD',
      },
      compact: {
        notation: 'compact',
      },
    },
    zh: {
      currency: {
        style: 'currency',
        currency: 'CNY',
      },
      compact: {
        notation: 'compact',
      },
    },
  },
})

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

十、懒加载语言包：优化你的应用性能

如果你的应用支持很多语言，将所有语言包都加载到内存中会占用大量的资源，影响应用性能。

vue-i18n 支持懒加载语言包，可以按需加载语言包，提高应用性能。

<template>
  <div>
    <select v-model="currentLocale">
      <option value="en">English</option>
      <option value="zh">中文</option>
      <option value="fr">Français</option>
    </select>
    <h1>{{ $t('greeting') }}</h1>
  </div>
</template>

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

const { locale, setLocaleMessage } = useI18n()
const currentLocale = ref(locale.value)

watch(currentLocale, async (newLocale) => {
  if (!locale.value) {
    try {
      const messages = await import(`./locales/${newLocale}.json`)
      setLocaleMessage(newLocale, messages.default)
      locale.value = newLocale
    } catch (error) {
      console.error('Failed to load locale:', error)
    }
  }
  locale.value = newLocale
})
</script>

这段代码会在切换语言时，动态加载对应的语言包，并使用 setLocaleMessage 方法将语言包添加到 vue-i18n 实例中。

十一、处理 RTL 语言：让你的布局“左右逢源”

某些语言（例如，阿拉伯语和希伯来语）是从右向左书写的，称为 RTL（Right-to-Left）语言。

在处理 RTL 语言时，需要调整应用的布局，使文本从右向左排列，并调整图标和图片的显示方向。

可以使用 CSS 的 direction 属性来设置文本的排列方向，并使用 CSS 的 transform: scaleX(-1) 属性来翻转图标和图片。

/* RTL 语言 */
[dir='rtl'] {
  direction: rtl;
}

[dir='rtl'] .icon {
  transform: scaleX(-1);
}
<template>
  <div :dir="isRtl ? 'rtl' : 'ltr'">
    <h1>{{ $t('greeting') }}</h1>
    <img src="./icon.png" class="icon" />
  </div>
</template>

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

const { locale } = useI18n()

const isRtl = computed(() => ['ar', 'he'].includes(locale.value))
</script>

这段代码会根据当前语言是否为 RTL 语言，动态设置 div 元素的 dir 属性，并翻转 img 元素的显示方向。

十二、测试你的 i18n 方案：确保你的应用“言之有物”

测试是 i18n 方案中不可或缺的一部分，可以确保你的应用在不同语言环境下都能正常工作。

可以使用单元测试和集成测试来测试 i18n 方案。

  • 单元测试： 可以测试单个组件的 i18n 功能，例如，测试组件是否能正确显示翻译文本，是否能正确处理参数化翻译和复数化。
  • 集成测试： 可以测试整个应用的 i18n 功能，例如，测试应用是否能正确切换语言，是否能正确格式化日期、时间和数字。

十三、总结：打造一个健壮的 i18n 方案

一个好的 i18n/l10n 方案需要考虑以下几个方面：

  • 可扩展性： 能够方便地添加新的语言和翻译文本。
  • 可维护性： 语言包的组织方式清晰，易于维护。
  • 性能： 能够按需加载语言包，避免占用过多的资源。
  • 测试： 能够通过测试确保 i18n 功能正常工作。

希望今天的讲座能帮助你更好地理解 Vue 应用的国际化和本地化，打造一个健壮的 i18n 方案！ 谢谢大家！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注