# 国际化
集成 [vue-i18n](https://kazupon.github.io/vue-i18n/) ，简化了配置，参考 vue-i18n 的语法使用就行

## 配置
在`fes.config.js`中设置`i18n`，增加语言配置
```javascript
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'
            }
        }
    }
}
```

## 使用

#### 在模板中

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

#### 在js中

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

#### 配置菜单名称
菜单名称支持配置国际化，使用`$i18n.xxx`格式的字符串指定菜单名称。
```js
    menu: [{
        title: '$i18n.menu.interface',
        path: '/api',
    }]
```

## 替换

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

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

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

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

组件库`fes-ui`目前只支持 `en` 和 `zh-cn` 两种语言，想支持新的语言可以参考[组件库新增国际化语言](/component/i18n)

## 切换语言

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