使用vue-i18n为你的Vue应用添加多语言支持

前言

在如今的互联网世界中，产品的国际化（Internationalization，简称 i18n）变得越来越重要。国际化不仅仅是将文本翻译成多种语言，更是提升用户的全球体验。如果你正在使用 Vue.js 构建应用，那么你可以借助 vue-i18n 插件，轻松实现国际化。接下来，我们以一种通俗易懂且有趣的方式，讲解如何在 Vue 项目中使用 vue-i18n。

什么是 vue-i18n？

vue-i18n 是一个为 Vue.js 提供国际化支持的插件。它可以帮助你管理多语言翻译、格式化日期和数字，以及处理其他与国际化相关的需求。简单来说，vue-i18n 就是给你的应用装上了一副能说多国语言的嘴巴。

安装 vue-i18n

首先，我们需要在 Vue 项目中安装 vue-i18n。假设你已经创建好了一个 Vue 项目，以下是安装步骤：

npm install vue-i18n
或者
yarn add vue-i18n

配置 vue-i18n

安装完成后，我们需要进行配置。以下是在 Vue 3 项目中的一个简单配置示例：
首先，在 src 目录下创建一个 i18n 目录，并在该目录下创建一个 index.js 文件：

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

// 定义翻译内容
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  zh: {
    message: {
      hello: '你好，世界'
    }
  }
}

// 创建 i18n 实例
const i18n = createI18n({
  locale: 'en', // 设置默认语言
  messages, // 设置翻译内容
})

export default i18n

接下来，在 src/main.js 中引入并使用 vue-i18n：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'

const app = createApp(App)

// 使用 i18n
app.use(i18n)

app.mount('#app')

使用 vue-i18n 在组件中显示多语言文本

现在我们的 vue-i18n 已经配置好了，接下来我们在组件中使用它。假设我们有一个 HelloWorld.vue 组件：

<template>
  <div>
    <p>{{ $t('message.hello') }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

<style scoped>
/* 你的样式代码 */
</style>

在这个例子中，$t 是 vue-i18n 提供的用于获取翻译文本的方法。当默认语言为英文时，它会显示 “hello world”。如果我们切换到中文，它会显示 “你好，世界”。

切换语言

为了让用户能够在不同语言之间自由切换，我们可以在组件中添加一个方法来修改语言设置。以下是一个示例：

<template>
  <div>
    <p>{{ $t('message.hello') }}</p>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('zh')">中文</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

<style scoped>
/* 你的样式代码 */
</style>

当用户点击按钮时，changeLanguage 方法会改变 vue-i18n 的 locale，从而切换显示的语言。

高级特性

1. 处理嵌入式占位符

在实际应用中，我们经常需要在翻译文本中插入动态内容，比如用户名、订单号等。vue-i18n 提供了占位符（placeholders）功能，允许我们在翻译文本中插入变量。

// 在 i18n 配置文件中
const messages = {
  en: {
    message: {
      hello: 'Hello, {name}!',
      order: 'Your order number is {orderNumber}.'
    }
  },
  zh: {
    message: {
      hello: '你好，{name}！',
      order: '你的订单号是 {orderNumber}。'
    }
  }
}

在组件中使用时：

<template>
  <div>
    <p>{{ $t('message.hello', { name: 'John' }) }}</p>
    <p>{{ $t('message.order', { orderNumber: 12345 }) }}</p>
  </div>
</template>

这样，翻译文本中的 {name} 和 {orderNumber} 会被替换为相应的动态值。

2. 处理日期和数字格式化

vue-i18n 支持日期和数字的本地化格式化，这对于显示日期、货币等信息时非常有用。

首先，我们需要在 i18n 配置中定义格式：

const numberFormats = {
  en: {
    currency: {
      style: 'currency', currency: 'USD'
    }
  },
  zh: {
    currency: {
      style: 'currency', currency: 'CNY'
    }
  }
}

const dateTimeFormats = {
  en: {
    short: {
      year: 'numeric', month: 'short', day: 'numeric'
    }
  },
  zh: {
    short: {
      year: 'numeric', month: 'numeric', day: 'numeric'
    }
  }
}

const i18n = createI18n({
  locale: 'en',
  messages,
  numberFormats,
  dateTimeFormats
})

然后在组件中使用：

<template>
  <div>
    <p>{{ $n(12345, 'currency') }}</p>
    <p>{{ $d(new Date(), 'short') }}</p>
  </div>
</template>

这样，数字和日期会根据当前语言的格式进行显示。例如，美元会显示为 $12,345.00，人民币会显示为 ¥12,345.00。

3. 使用懒加载加载语言包

在大型应用中，为了优化性能，我们可以使用懒加载（lazy load）来按需加载语言包。这样可以减少首次加载时间，提高用户体验。

首先，创建单独的语言包文件，例如 src/locales/en.js 和 src/locales/zh.js：

// src/locales/en.js
export default {
  message: {
    hello: 'hello world'
  }
}

// src/locales/zh.js
export default {
  message: {
    hello: '你好，世界'
  }
}

在 i18n 配置文件中使用动态导入：

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'en', // 默认语言
  messages: {}  // 初始为空
})

export function loadLocaleMessages () {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.js$/i)
  const messages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_,\s]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key).default
    }
  })
  i18n.global.setLocaleMessage(i18n.global.locale, messages[i18n.global.locale])
}

export default i18n

然后在 main.js 中加载语言包：

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

const app = createApp(App)

loadLocaleMessages()  // 加载初始语言包

app.use(i18n)
app.mount('#app')

这样，我们仅在需要时加载语言包，从而优化了应用性能。

4. 动态切换语言并持久化设置

为了让用户的语言选择在刷新后依然生效，我们可以使用浏览器的 localStorage 来持久化语言设置。

在 i18n 配置文件中：

const savedLocale = localStorage.getItem('user-locale') || 'en'
const i18n = createI18n({
  locale: savedLocale,
  messages,
  numberFormats,
  dateTimeFormats
})

export default i18n

在组件中修改语言设置时：

<template>
  <div>
    <p>{{ $t('message.hello') }}</p>
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('zh')">中文</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang
      localStorage.setItem('user-locale', lang)
    }
  }
}
</script>

这样，无论用户刷新页面还是重新访问，你的应用都会记住他们的语言选择。

总结

通过以上步骤，我们已经为 Vue 项目添加了简单且实用的国际化支持。vue-i18n 是一个强大且灵活的工具，可以满足大多数应用的国际化需求。从安装、配置到实际使用，相信你已经了解到如何让你的应用“开口说多国语言”。