mes-ui-d2/docs/zh/sys-plugins/i18n.md

# 多国语

多国语插件

::: tip
此文档仅限于演示如何在 `D2Admin` 中使用多国语言设置
:::

公用的语言设置建议放在 `src/i18n` 下

i18n 文件夹结构如下所示

```
|__index.js // 主文件
|__lang // 语言配置文件夹
| |__cn // 中文
| | |__index.js // 中文 公用配置
| |__ja // 日语
| | |__index.js // 日语 公用配置
| |__en // 英语
| | |__index.js // 英语 公用配置
```

在 `src/i18n/index.js` 中导入同级lang文件夹内的语言设置，并导出一个新的 `VueI18n` 实例供 `main.js` 使用

``` js
import i18n from './i18n'
new Vue({
  el: '#app',
  store,
  i18n, // 使用 i18n
  router,
  template: '<App/>',
  components: { App }
})
```

## 使用

使用 `$t('路径')`

``` vue
<PageHeader
  slot="header"
  :title="`${$t('pub.pageHeader.demo')} 1`"
  url="http://kazupon.github.io/vue-i18n/en/">
</PageHeader>
```

## 局部配置

有时候我们只希望在某个文件中配置这个组件的多国语言，如果所有的语言设置都放在 `d2-admin/src/i18n` 中会造成混乱，不易维护

`D2Admin` 已经替你安装好了 `vue-i18n-loader`，可以方便地在单文件组件中使用

示例

``` vue
<i18n src="./lang.json"></i18n>

<template>
  <div>
    <el-tag>{{$t('hello')}}</el-tag>
    <p>{{$t('check.title')}}</p>
    <el-checkbox-group v-model="check">
      <el-checkbox label="a">{{$t('check.label.Beijing')}}</el-checkbox>
      <el-checkbox label="b">{{$t('check.label.Tokyo')}}</el-checkbox>
      <el-checkbox label="c">{{$t('check.label.NewYork')}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data () {
    return {
      check: ['a', 'b']
    }
  }
}
</script>
```

在同一文件夹下的 `lang.json`

``` json
{
  "cn": {
    "hello": "你好",
    "check": {
      "title": "请选择",
      "label": {
        "Beijing": "北京",
        "Tokyo": "东京",
        "NewYork": "纽约"
      }
    }
  },
  "en": {
    "hello": "hello",
    "check": {
      "title": "Please choose",
      "label": {
        "Beijing": "Beijing",
        "Tokyo": "Tokyo",
        "NewYork": "NewYork"
      }
    }
  },
  "ja": {
    "hello": "こんにちは",
    "check": {
      "title": "選択してください",
      "label": {
        "Beijing": "北京",
        "Tokyo": "東京",
        "NewYork": "ニューヨーク"
      }
    }
  }
}
```

详细教程请查看官方文档，见此页右上角的链接