# 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 master will no longer provide i18n. Because most users are not need i18n, the removal of i18n workload is quite large.
If you have i18n requirements, please use i18n Branch, which is updated synchronously with master.