Vue 项目中实现多语言国际化 ( i18n )

JavaScript06

Vue 项目中实现多语言国际化 ( i18n ),第1张

现在项目中很多情况下需要实现 国际化 ,即 多语言 。比较常用的就是 中/英 文的切换。

普遍常用的就是 I18N 了,怎么实现呢?莫急,咱们往下瞅!

第一步:安装

第二步:在 src 目录下新建一个 lang 文件

一般有三个文件: index.js( 配置 ) 、 zh( 中文 ) 、 en( 英文 )

如果有个更多的语言设置,新增对应的 js 文件即可

注意:所有语言包的内部结构必须一样,方便调用

第三步:main.js 里引入 i18n 的配置

第四步:在页面使用

引入 i18n 以后,会全局注册一个变量 $t

平时我们取值都是 {{ name }}

现在我们取值是 {{$t(index.title)}} , index.title 就是在语言里的属性

哇哦,多语言是不是很简单,动起手来,赶紧试试吧!!!

查看package.json

i18n.js

在i18n.js文件中,我们不需要关注其他的配置,只需看懂这2项配置即可。

zh.js

en.js

在.vue文件中使用

页面显示中文还是英文取决于i18n.js文件当中的这一行命令

当DEFAULT_LANG = 'zh',页面显示中文

当DEFAULT_LANG = 'en', 页面显示英文

在locales目录下创建web、server目录,分别存放前后端(nodejs)的国际化文件

nodejs当前采用的是npm 的 i18n 库,该函数会根据lang自动加载directory配置项下的‘lang’.json;因此需重新设置 directory

前端Ext采用的是自定义函数 _() ,该函数需要读取dict进行key的匹配进行国际化;需修改读取前端国际化json的目录为 /locales/web

根据现有的模块,自行创建模块目录,将自己的前后端国际化内容写在自定义json中

国际化key需按照模块名称作为顶级作用于,采用 包命名 的方式,采用 驼峰命名

创建i18n文件,自定义Ajax方法获取后端的dict字典,将字典缓存在内存中

后端返回

在modules目录下创建i18n模块,用来管理前后端的国际化文件

webapp在首次运行时会加载该模块,并负责合并各个模块的语言json,创建生成制定名称的json文件。

之后nodejs的i18n模块会负责管理后端国际化

前端页面在首次加载时会调用接口请求前端国际化文件数据

原来的zh_CN.json的内容移植到了 base.json 文件中,各模块可以 暂时不处理 base.json中的内容,日后项目的 新增国际化 在模块国际化文件中编写,有时间可以将base.json中的属于本模块的国际化内容修改并移植到本模块国际化文件中