# 国际化
本项目集合了国际化 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+版本之后,默认 master 将不再提供国际化。因为大部分用户其实是用不到国际化的,但移除国际化工作量又相当的大。
如果你有国际化需求的请使用 i18n 分支,它与 master 同步更新。