让你的网页变的高大上：国际化Vue-i18n

Vue国际化：Vue-i18n

一、Vue-i18n 是什么？

Vue-i18n 是专门为 Vue.js 设计的国际化插件

主要作用是帮助开发者轻松管理应用中的多语言文本内容

使应用能够根据用户的语言偏好进行动态切换显示。

二、安装与初始化

安装 Vue-i18n ，可以通过 npm 或 yarn 等包管理工具进行安装。

npm install vue-i18n

在 Vue 项目中，在入口文件中引入 Vue-i18n 并进行简单的初始化配置。

例如：

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  fallbackLocale: 'zh-CN', // 预设的语言环境
  locale: 'zh-CN', // 语言环境
  legacy: false, //如果要支持compositionAPI，此项必须设置为false;
  globalInjection: true, // 全局注册$t方法
  messages: {
    'en-US': {
      '你好': 'Hello',
      '欢迎': 'Welcome to our app.'
    },
    'zh-CN': {
      '你好': '你好',
      '欢迎': '欢迎'
    },
	'zh-TW': {
      '你好': '妳好',
      '欢迎': '歡迎'
    }
  }
});

new Vue({
  i18n,
  //...其他配置
});

其他配置项：

dateTimeFormats

🆕 7.0+ 新增

• 类型： DateTimeFormats

• 默认值： {}

本地化的日期时间格式。

numberFormats

🆕 7.0+ 新增

• 类型： NumberFormats

• 默认值： {}

本地化的数字格式。

availableLocales

🆕 8.9.0+ 新增

• 类型： Locale[]

• 默认值： []

• 示例： ["en", "ja"]

以词法顺序排列的 messages 中的可用语言环境列表。

ormatter

• 类型： Formatter

• 默认值： Built in formatter

使用 Formatter 接口实现的格式化。

missing

• 类型： MissingHandler

• 默认值： null

缺少本地化时的处理函数。该处理函数在被调用时会使用本地化目标语言环境，本地化路径关键字和 Vue 实例。

如果设置了该函数，则本地化信息未定义时不会产生警告。

fallbackRoot

• 类型： Boolean

• 默认值： true

在组件本地化中，当本地化失败时是否回退到根级别 (全局) 本地化。

如果为 false，则会发出警告，并返回 key。

fallbackRootWithEmptyString

🆕 8.26+ 新增

• Type: Boolean

• Default: true

在组件本地化中，当本地化文本为空字符串时，是否回退到根级别 (全局) 本地化。

请注意，vue-i18n 9.x版本的默认行为是对空字符串本地化文本进行回退到根级别本地化。

如果为false，则空的本地化文本将不会回退到根目录，并将保留为空字符串。

sync

• 类型： Boolean

• 默认值： true

是否将根级别语言环境与组件本地化语言环境同步。

如果为 false，则无论根级别语言环境如何，都要为每个组件语言环境进行本地化。

silentTranslationWarn

6.1+ 新增

• 类型： Boolean

• 默认值： false

是否取消本地化失败时输出的警告。

如果为 true，则禁止本地化失败警告。

silentFallbackWarn

🆕 8.8 新增

• 类型： Boolean

• 默认值： false

是否在回退到 fallbackLocale 或 root 时取消警告。

如果为 true，则仅在根本没有可用的转换时生成警告，而不是在回退时。

formatter

• 类型： Formatter

• 可读/可写

使用 Formatter 接口实现的格式化

方法

getChoiceIndex

• 参数：

  • {number} choice

  • {number} choicesLength

• 返回值： finalChoice {number}

根据当前的数字和一组给定的选项，获取其复数索引，可以通过原型变更覆盖：

VueI18n.prototype.getChoiceIndex = /* 自定义实现 */

getLocaleMessage( locale )

• 参数：

  • {Locale} locale

• 返回值： LocaleMessageObject

获取语言环境的 locale 信息。

setLocaleMessage( locale, message )

• 参数：

  • {Locale} locale

  • {LocaleMessageObject} message

设置语言环境的 locale 信息。

t( key, [locale], [values] )

• 参数：

  • {Path} key：必填

  • {Locale} locale：可选

  • {Array | Object} values：可选

• 返回值： ：TranslateResult

这与 $t 方法返回的 Function 相同

三、语言资源管理

Vue-i18n 允许开发者以结构化的方式管理语言资源。

通常语言资源以 JSON 文件的形式存储，每个文件对应一种语言。

这样的设计使得添加新语言或修改现有语言的文本内容变得非常容易。

例如：

/locales/
  en-US.json
  zh-CN.json
  zh-TW.json

四、在组件中使用

在 Vue 组件中，可以通过 $t 方法来访问特定语言的文本内容。

例如：

<template>
  <div>
    <p>{{ $t('你好') }}</p>
    <p>{{ $t('欢迎') }}</p>
  </div>
</template>

五、动态切换语言

Vue-i18n 支持动态切换语言，可以在应用中提供一个语言切换的选项，当用户选择不同的语言时，应用可以实时更新显示的文本内容。

例如：

methods: {
  changeLanguage(lang) {
    this.$i18n.locale = lang;
  }
}

六、指令

v-t

• 预期： string | Object

• 修饰符：

  • .preserve：(8.7.0 新增) 当指令解除绑定时，保留元素 textContent。

• 详细：

更新使用语言环境信息进行本地化的元素 textContent。你可以使用字符串语法或对象语法。字符串语法可以指定为语言环境信息的关键字路径。如果可以使用对象语法，则需要将以下参数指定为对象键：

• path：必填，语言环境信息的关键字

• locale：可选，语言环境

• args：可选，用于列表或命名格式

注意

当 v-t 指令解除绑定时，默认情况下将清除元素 textContent。在过渡动画内部使用的时候，可能出现不合预期的情况。为了在指令解除绑定之后保留 textContent 数据，可使用 .preserve 修饰符或全局的preserveDirectiveContent 选项。

• 示例：

  <!-- 字符串语法：字面量 -->
  <p v-t="'foo.bar'"></p>
  
  <!-- 字符串语法：通过数据或计算属性绑定 -->
  <p v-t="msg"></p>
  
  <!-- 对象语法： 字面量 -->
  <p v-t="{ path: 'hi', locale: 'ja', args: { name: 'kazupon' } }"></p>
  
  <!-- 对象语法： 通过数据或计算属性绑定 -->
  <p v-t="{ path: greeting, args: { name: fullName } }"></p>
  
  <!-- `preserve` 修饰符 -->
  <p v-t.preserve="'foo.bar'"></p>

七、支持变量

// 在你的语言文件中，例如：en.js
export default {
  message: {
    hello: 'Hello, {name}!'
  }
}

<template>
  <p>{{ $t("message.hello", { name: '张三' }) }}</p>
</template>

八、应用场景与优势

Vue-i18n 广泛适用于各种类型的 Vue 应用，无论是企业级的管理系统、电子商务平台还是移动应用。

优势：

1. 提高用户体验：满足不同语言用户的需求，提供更加友好的界面。
2. 易于维护：将语言文本与代码分离，使得修改和扩展语言支持变得更加简单。
3. 灵活性：可以根据不同的场景和用户需求动态切换语言。