国际化

集成 vue-i18n (opens new window) ，简化了配置，参考 vue-i18n 的语法使用就行

配置

在fes.config.js中设置i18n，增加语言配置

i18n: {
    locale: 'en', // default zh-cn
    messages: {
        'zh-cn': {
            menu: {
                interface: '接口'
            },
            overview: '概述',
            i18n: {
                internationalization: '国际化，基于',
                achieve: '实现。',
                ui: 'UI组件'
            }
        },
        'en': {
            menu: {
                interface: 'interface'
            },
            overview: 'Overview',
            i18n: {
                internationalization: 'internationalization，base on',
                achieve: 'to achieve.',
                ui: 'UI components'
            }
        }
    }
}

使用

在模板中

<h2>{{ $t('overview') }}</h2>

在js中

function(){
    let overview = this.$t('overview')
}

配置菜单名称

菜单名称支持配置国际化，使用$i18n.xxx格式的字符串指定菜单名称。

    menu: [{
        title: '$i18n.menu.interface',
        path: '/api',
    }]

替换

用参数替换模块字符串中{}包裹的部分

<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>

i18n: {
    locale: 'en',
    messages: {
        'en': {
            message: {
                hello: '{msg} world'
            }
        }
    }
}

给组件库添加新国际化语言

组件库fes-ui目前只支持 en 和 zh-cn 两种语言，想支持新的语言可以参考组件库新增国际化语言

切换语言

// 切换到en
this.FesApp.setLocale('en')