124 lines
2.4 KiB
Markdown
124 lines
2.4 KiB
Markdown
|
# 多国语
|
|||
|
|
|
|||
|
|
多国语插件
|
|||
|
|
|
|||
|
|
::: 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>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 局部配置
|
|||
|
|
|
|||
|
|
有时候我们只希望在某个文件中配置这个组件的多国语言，如果所有的语言设置都放在 `d2admin-vue-element/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": "ニューヨーク"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
详细教程请查看官方文档，见此页右上角的链接
|