# I18n

This project is a collection of internationalized i18n solutions. Implemented via vue-i18n.

Since the project's ui framework uses element, internationalization also needs to be internationalized. code. At the same time, the current lang language save in the cookie, and the last language setting can be remembered for opening the page next time.

# Global lang

Code: @/lang Currently set English and Chinese languages.

Meanwhile, import a language package in @/lang/index.js for element-ui.

# Async lang

There are some langs that are needed for specific pages, such as the @/views/i18n page, you can use async lang.

import local from './local'

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

# Use $t in js

If you use a component such as select, its value comes through v-for, such as:

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

In this case, i18n will only be executed once, because this.options in js will only be executed once during created, and its data will not change as your local lang changes, so You need to manually reset this.options when the lang changes.

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

# Remove i18n

In src/main.js remove import i18n from './lang' and delete src/lang folder.

And remove this.$t('route.xxxx') in src/layout/components/Levelbar、src/layout/components/SidebarItem、src/layout/components/TabsView or others.

After the v4.1.0+ version, the default main will no longer provide i18n. Because most users are not need i18n, the removal of i18n workload is quite large.

TODO: If you have i18n requirements, please use i18n Branch, which is updated synchronously with main.