国际化

本项目使用 vue-i18n 实现国际化功能。

目前配置的语言：

zh（中文）
en（英文）

项目自身业务需要实现国际化功能的同时，也需要对一些第三方进行国际化，如 element-ui。好在 element-ui 已实现国际化功能。使用示例：

i18n 配置

@/language

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import cache from '@/utils/cache'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui 语言文件
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // element-ui 语言文件
import enLocale from './en.js' // 自定义语言文件
import zhLocale from './zh.js' // 自定义语言文件

Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: cache.getCookie('language') || 'zh',
    messages: {
        zh: {
            ...zhLocale,
            ...elementZhLocale
        },
        en: {
            ...enLocale,
            ...elementEnLocale
        }
    }
})

export default i18n

store 配置

@/store

import cache from '@/utils/cache'
import i18n from '@/language'
const state = {
    // ...
    language: cache.getCookie('language') || 'zh',
}
const mutations  {
    // ...
    SET_LANGUAGE(state, lang) {
        state.language = lang
        i18n.locale = lang
        cache.setCookie('language', lang) // 下次进入记住用户所选语言
    }
}

使用 vuex 管理当前语言，是方便其他组件进行调用。

使用方法

切换语言

调用 vuex 的 SET_LANGUAGE 即可

// val是上方i18n配置的message，如 zh || en
this.$store.commit('SET_LANGUAGE', val)

注意

某些组件只在初始化时，对文本进行渲染，所以它并不会随着你当前语言的切换而改变，如 element-ui 的 select 组件。解决方法是：watch 当前 language 值，在回调中重新设置。

转换文本

vue-i18n 使用 $t 方法根据语言包转换文本。

<div>{{$t('route.index')}}</div>

渲染结果

<!-- zh -->
<div>首页</div>

<!-- en -->
<div>Index</div>

TIP

当 $t 方法找不到对应文本时，只会返回原值，即渲染出 <div>router.index</div>，这不符合我们的错误处理，我们可以使用 $te 去判断是否有该值，然后才使用 $t 进行转换。示例：转换路由标题，@/util/i18n.js。

合并异步语言包

示例：@/pages/index/children/i18n-demo

// 获取语言包 local
this.$i18n.mergeLocaleMessage('zh', local.zh)
this.$i18n.mergeLocaleMessage('en', local.en)

更多内容请查看 vue-i18n 文档

# 国际化

# i18n 配置

# store 配置

# 使用方法

# 切换语言

# 转换文本