共计 1374 个字符，预计需要花费 4 分钟才能阅读完成。

前言

国际化(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 !