# 国际化

本项目集合了国际化 i18n 方案。通过 vue-i18n而实现。

由于本项目 ui 框架使用了element，所以国际化的同时也要将其国际化。完整代码。同时将当前 lang 语言存在 cookie之中，为了下次打开页面能记住上次的语言设置。

# 全局 lang

代码地址: @/lang 目前配置了英文和中文两种语言。

同时在 @/lang/index.js 中引入了 element-ui的语言包

使用：

// $t 是 vue-i18n 提供的全局方法，更多信息请查看其文档
$t('login.title')

# 异步 lang

有一些某些特定页面才需要的 lang，比如 @/views/i18n-demo 页面

import local from './local'

this.$i18n.mergeLocaleMessage('en', local.en)
this.$i18n.mergeLocaleMessage('zh', local.zh)

# 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')
        }
      ]
    }
  }
}

# 移除国际化

在 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+版本之后，默认 main 将不再提供国际化。因为大部分用户其实是用不到国际化的，但移除国际化工作量又相当的大。

TODO 如果你有国际化需求的请使用 i18n 分支，它与 main 同步更新。