使用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 = langlocalStorage.setItem('user-locale', lang)}}
}
</script>

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