前言
国际化(Internationalization, 简称i18n) 指使产品适应不同语言和地区的流程
为了开发的网页能够给不同国家和地区的用户 适配他们的语言和习惯而设计。
通过研究antd pro of vue项目的i18n 开发规范
基于vue2 + vue-i18n + moment + vuex 相关的技术栈...
我可以得出如下的设计思路：
让我来为你详细解释整体运行流程，稍微再为你解释细节：
vue-i18n 是一个实现i18n 的库，在vue中通过
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
以插件形式注入使用。
整体来看，为了实现i18n，在目录src/locales/index.js 注册该插件（如上代码），接着在
new Vue({
i18n,
render: h => h(App),
}).$mount('#app')
vue实例中注入。就像使用vue Router那样！
再建立这样的目录结构，为了页面各个部分都能在设置某一语言下 而显示对应语言内容，我们通过vuex 全局状态管理 保存语言属性(lang)以及设置语言的方法(setLang) 实现 跨组件的通信以方便：在切换时 所有组件的语言保持统一
在设计模块时，可以按照一定的规范：比如要实现网页能够切换中文和英文
要能够显示英文内容则为：
很显然：实现i18n的逻辑就是，设置同样的键，但值是在你切换 或者你访问页面时，页面根据你当前设备和地区的偏好语言自动设置
i18n.locale('lang',lang)
当设置lang为中文(zn-CN)时 将使用中文的语言映射对象，与此同时，设置lang为英文(en-US) 将使用英文的语言映射对象
而且我们看到： 映射对象中键的设计是有规范的： 使用 模块.功能.子功能 的层级结构
例如：menu.dashboard.analysis
便于管理和避免命名冲突
为了 实现模块化开发，将页面的不同部分分为不同模块，但在index.js 统一导入并导出 这方便了维护不同部分的内容。 详细的实现如下：
import enUS from './lang/en-US'
import znCN from './lang/zh-CN'
Vue.use(VueI18n)
export const defaultLang = 'en-US'
// 实例化i18n 进行基础设置
const messages = {
'en-US': {
...enUS
},
'zh-CN': {
...znCN
}
}
想要适配其他语言，就再维护一套 该语言的 模块即可。
也就是你只需要新增
- [locale] 目录
- 目录下其他模块的语言映射对象
[locale].js 用于统一导入并导出
接着在src/locale/index.js 里导入即可
在组件中如何使用？
使用$t() 函数，该函数在注册i18n插件时 自动合并在vue实例下，所以全局可用
你只需要传入 对应的键 插件会根据当前语言 选择使用对应的语言显示！
并且，为了优化 我们在动态加载语言的时候 使用魔法注释/* webpackChunkName: lang-[request] */ 以分成多个chunk包，以便语言包的按需加载
总结
Vue-i18n 的插件 极大方便了为了实现国际化的vue项目的需求。
通过模块化的开发方式可以很方便的维护各个部分的语言显示预设。
这是我从开源项目中学到的一个重要一点！ 如果你有问题 可以随时与我联系
Respect !
