# 国际化
本项目集合了国际化 i18n 方案。通过[vue-i18n](https://github.com/kazupon/vue-i18n)而实现。
由于本项目 ui 框架使用了`element`，所以国际化的同时也要将其国际化。[完整代码](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/lang/index.js)。 同时将当前`lang`语言存在`cookie`之中，为了下次打开页面能记住上次的语言设置。
# [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/i18n.html#%E5%85%A8%E5%B1%80-lang)全局 lang
代码地址:[@/lang](https://github.com/PanJiaChen/vue-element-admin/tree/master/src/lang)目前配置了英文和中文两种语言。
同时在`@/lang/index.js`中引入了`element-ui`的语言包
**使用：**
~~~
// $t 是 vue-i18n 提供的全局方法，更多信息请查看其文档
$t('login.title')
~~~
# [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/i18n.html#%E5%BC%82%E6%AD%A5-lang)异步 lang
有一些某些特定页面才需要的 lang，比如`@/views/i18n-demo`页面
~~~
import local from './local'
this.$i18n.mergeLocaleMessage('en', local.en)
this.$i18n.mergeLocaleMessage('zh', local.zh)
~~~
# [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/i18n.html#js-%E4%B8%AD%E4%BD%BF%E7%94%A8-t)js 中使用 $t
如果你使用如`select`组件，它的值是通过`v-for`而来，如：
~~~
<el-select v-model="value">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"/>
</el-select>
~~~
~~~
this.options = [
{
value: '1',
label: this.$t('i18nView.one')
},
{
value: '2',
label: this.$t('i18nView.two')
},
{
value: '3',
label: this.$t('i18nView.three')
}
]
~~~
这种情况下，国际化只会执行一次，因为在 js 中的`this.options`只会在初始化的时候执行一次，它的数据并不会随着你本地`lang`的变化而变化，所以需要你在`lang`变化的时候手动重设`this.options`。
~~~
export default {
watch: {
lang() {
this.setOptions()
}
},
methods: {
setOptions() {
this.options = [
{
value: '1',
label: this.$t('i18nView.one')
},
{
value: '2',
label: this.$t('i18nView.two')
},
{
value: '3',
label: this.$t('i18nView.three')
}
]
}
}
}
~~~
# [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/i18n.html#%E7%A7%BB%E9%99%A4%E5%9B%BD%E9%99%85%E5%8C%96)移除国际化
在`src/main.js`中移除`import i18n from './lang'`并且删除`src/lang`文件夹。
并在`src/layout/components/Levelbar`、`src/layout/components/SidebarItem`、`src/layout/components/TabsView`等文件夹中 移除`this.$t('route.xxxx')`使用国际化的方式。
在v4.1.0+版本之后，默认 master 将不再提供国际化。因为大部分用户其实是用不到国际化的，但移除国际化工作量又相当的大。
如果你有国际化需求的请使用[i18n 分支](https://github.com/PanJiaChen/vue-element-admin/tree/i18n)，它与 master 同步更新。
