i18n 也就是俗说的国际化，而国际化是需要语言化支持的，并且网站支持的语种越多，语言包会越大。本示例将使用 Vue I18n 结合 Vue.js + Vue Router + Vuex 来实现异步加载语言包的例子。
src
├── components
│ └── Locale.vue - 添加一个切换语言的示例组件
├── config
│ └── site.js - 站点配置，添加当前支持的语言列表、当前默认语言
├── locales - 国际化目录
│ ├── en-us - 英语
│ │ └── index.js - 全部语言包都在一个 .js 文件
│ ├── index.js - 国际化入口
│ └── zh-cn - 中文
│ ├── index.js - 中文下都是以模块为 .json 文件存放
│ ├── index.json
│ ├── locale.json
│ ├── message.json
│ └── view.json
├── router
│ ├── index.js
│ └── locale.js - 添加语言处理的路由导航守卫
└── utils
└── cookie.js - 继承 js-cookie 跳转的 Cookie 操作方法
- 链接中显式 - 比如复制一个链接直接发给别人打开
- Cookie - 曾经访问过
- 浏览器设置 - 尝试从当前支持的语言列表匹配到浏览器设置的首选语言
- 默认语言 -
src/config/site.js中配置
i18n 需要提示以对象（{}）的数据为国际化数据，并且由于页面组件的灵活、组件交叉引用，语言包不方便做成按页面、按组件异步加载，但由于项目越来越大，语言包原始文件越来越大，我们以语种为粒度做异步加载，也就是说在中文下只加载中文语言包，在英文下只加载英文语言包。
我们遵循 src/locales/{语种}/ 为该语种的所有国际化语言包，再约定 src/locales/{语种}/index 为该语种的异步加载入口。
而语言包内的实现是全部在 index.js 中写，还是由 index.js 加载不同的 *.json 文件，取决于你。但这里强烈推荐使用 *.json 存放语言包，因为可以无缝的接入一些翻译平台（当然需要开发一些接入插件，这是后话），如：Crowdin 。
注意：语种尽量使用全小写，并且格式为 语言-地区 格式，参考：
- 语言标识参考：https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
- 地区标识参考：https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 ，但地区推荐使用小写，在页面输出各种属性时就当使用程序转换
链接如：
- 推荐：https://xuexb.com/zh-cn/path/
- 推荐：https://xuexb.com/zh/path/
- 不推荐：https://xuexb.com/zh-CN/path/
- 不推荐：https://xuexb.com/ZH/path/
处理修正大小写等容错。
在模板里直接使用 {{ $t('key) }} 即可响应式，其他请参考 Vue I18n 语法。
// 错误的
data() {
return {
message: this.$t('key'),
};
},
// 正确的
computed: {
message(){
return this.$t('key');
},
},