前端开发系列055-基础篇之Vue项目实现多语言支持

插件介绍

介绍：Vuei18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。

安装：npm install vue-i18n 或者 yarn add vue-i18n

项目使用

在项目目录下面创建一个文件夹(随便叫啥名都行)，这个文件夹主要用于处理i18n模块，做两件事情。

第一件事情是需要根据vue-i18n模块来导出一个i18n的实例对象，以供项目中能够直接使用。

第二件事情是需要提供具体的多语言支持文件，比如支持中文、中文繁体和英文，那么就需要提供特定字段的三种语言版本，以供按实际语言来进行显示。下面给出文件目录结构。

//index.ts文件中的代码示例：
//引入模块
import { createI18n } from 'vue-i18n';
//引入语言包(模块)
import zh from './zh';
import en from './en';
import tw from './tw';

//获取当前环境的语言
let language = navigator.language;
console.log('日志：language = ', language);

//如果当前环境语言非'zh-TW', 'en-US', 'zh-CN' 则默认选择中文
if (!['zh-TW', 'en-US', 'zh-CN'].includes(language)) {
  language = 'zh-CN';
}

console.log('日志：多语言处理，当前语言环境为 = ', language);
// 创建i18n实例对象
const i18n = createI18n({
  locale: language,     // 设置语言
  messages: {           // 设置语言包
    'zh-CN': zh,
    'en-US': en,
    'zh-TW': tw
  }
});

export default i18n;

语言包其实就是就是需要多语言处理的字典，比如 我们有一个按钮，在不同的语言环境中需要分别被处理为：close、关闭、關閉，只需要在不同的语言包中写好对应的字典并在模块中返回，下面给出简单的对应关系。

//tw.ts文件内容
const tw = {
  message: {
    close: '關閉',
    search: '搜索',
    noFiles: '暫無文件'
  }
};

export default tw;

//zh.ts文件内容
const zh = {
  message: {
    close: '关闭',
    search: '搜索',
    noFiles: '暂无文件'
  }
};

export default zh;

//en.ts文件内容
const en = {
  message: {
    close: 'Close',
    search: 'Search',
    noFiles: 'No files'
  }
};

export default en;

使用场景

项目中大概有两种场景，一种是在DOM节点中，一种是在JS的代码中。

如果是DOM节点中使用，那么可以直接通过$t('message.xxx')的方式来使用。

<!-- 01 节点的内容 -->
<div class="text">{{ $t('message.noFiles') }}</div>

<!-- 02 节点的属性 -->
 <InsertPanel :action="action === 'save' ? $t('message.save') : $t('message.insert')"/>

如果是在JS中使用，那么可以通过之前在src/i18n/index.ts中导出的实例对象来获取。

// 先导入模块
import i18n from '../i18n';

// 获取字段
let close =  i18n.global.t('message.close');

参数处理

在处理字典的时候，可能有的字典中存在一些变量，比如我在Vue的节点中需要显示的内容为：当前选择20项，在进行多语言处理前，大概写法如下：

<div> 当前选择 {{  count }} 项 </div>

如果我们在语言包(以zh为例)中对应的字段为: selectCout，那么可以写成下面格式

//zh.ts 文件语言包代码示例
const zh = {
  message: {
    itemSelected: '当前选择{count}项'
  }
};
export default zh;

//使用页面的代码示例，其中count为全局可以访问的变量
<div> {{ $t('message.itemSelected',count:selectCount)}} </div>