安装 i18n 模块

1
npm install vue-i18n --save

在src下创建lang目录及对应语言目录

配置src/lang/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// src > lang > index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import VueCookie from 'vue-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui 的语言包,没用到的可以不引入
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui 的语言包,没用到的可以不引入
import elementEsLocale from 'element-ui/lib/locale/lang/es'// element-ui 的语言包,没用到的可以不引入
import enLocale from './en.json' // 项目中的语言包 英文
import zhLocale from './zh.json' // 项目中的语言包 中文
import esLocale from './es.json' // 项目中的语言包 西班牙语

Vue.use(VueI18n)

const messages = {
en: {
...enLocale,
...elementEnLocale
},
zh: {
...zhLocale,
...elementZhLocale
},
es: {
...esLocale,
...elementEsLocale
}
}
// 获取当前语言环境:考虑到刷新操作,将语言类型存入缓存
export function getLanguage() {
const chooseLanguage = VueCookie.get('Language')
if (chooseLanguage) return chooseLanguage

// if has not choose language
const language = (navigator.language || navigator.browserLanguage).toLowerCase()
const locales = Object.keys(messages)
for (const locale of locales) {
if (language.indexOf(locale) > -1) {
return locale
}
}
return 'zh'
}
const i18n = new VueI18n({
locale: getLanguage(),
fallbackLocale: 'zh',
silentTranslationWarn: true,
messages
})

export default i18n

编写字典文件

zh.json

1
2
3
4
5
6
7
8
9
{
"shou-ye": "首页",
"guan-bi-dang-qian-biao-qian-ye": "关闭当前标签页",
"guan-bi-qi-ta-biao-qian-ye": "关闭其它标签页",
"guan-bi-quan-bu-biao-qian-ye": "关闭全部标签页",
"shua-xin-dang-qian-biao-qian-ye": "刷新当前标签页",
"xiu-gai-mi-ma": "修改密码",
"zhang-hao": "账号"
}

en.json

1
2
3
4
5
6
7
8
9
{
"shou-ye": "home page",
"guan-bi-dang-qian-biao-qian-ye": "Close current tab",
"guan-bi-qi-ta-biao-qian-ye": "Close other tabs",
"guan-bi-quan-bu-biao-qian-ye": "Close all tabs",
"shua-xin-dang-qian-biao-qian-ye": "Refresh the current tab",
"xiu-gai-mi-ma": "Change Password",
"zhang-hao": "account number"
}

es.json

1
2
3
4
5
6
7
8
9
{
"shou-ye": "Página principal",
"guan-bi-dang-qian-biao-qian-ye": "Cerrar la pestaña actual",
"guan-bi-qi-ta-biao-qian-ye": "Cerrar otras pestañas",
"guan-bi-quan-bu-biao-qian-ye": "Cerrar todas las pestañas",
"shua-xin-dang-qian-biao-qian-ye": "Actualizar la pestaña actual",
"xiu-gai-mi-ma": "Cambiar contraseña",
"zhang-hao": "Número de cuenta"
}

在main.js中引入i18n

1
2
3
4
5
6
7
8
9
10
11
12
13
import i18n from './lang' //i18n的配置文件

import ElementLocale from 'element-ui/lib/locale'
ElementLocale.i18n((key, value) => i18n.t(key, value))//配置elment_ui i18n

new Vue({
i18n,
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})

语言切换

html

1
2
3
4
5
6
7
8
9
10
11
<el-submenu index="1">
<template slot="title">
<span v-if="$i18n.locale=='es'" >ES</span>
<span v-else-if="$i18n.locale=='en'" >EN</span>
<span v-else>中文</span>
</template>
<el-menu-item @click="setLanguage('zh')" :disabled="$i18n.locale=='zh'" index="1-1">中文</el-menu-item>
<el-menu-item @click="setLanguage('en')" :disabled="$i18n.locale=='en'" index="1-2">EN</el-menu-item>
<el-menu-item @click="setLanguage('es')" :disabled="$i18n.locale=='es'" index="1-3">ES</el-menu-item>
</el-submenu>

js

1
2
3
4
5
// 设置语言
setLanguage(lang) {
this.$cookie.set("schLanguage", lang, {expires: "7D"});
this.$i18n.locale = lang
},

在vue文件中使用

vue代码使用$t获取国际化

普通文本使用方式:

1
{{ $t('shou-ye') }}

标签内使用方式:

1
:placeholder="$t('shou-ye')"

vue内嵌js内使用方式:

1
this.$t('shou-ye')

其他js使用:

1
2
import i18n from '@/lang' //如果是vue文件以外的地方使用,可用这种方式(比如路由)
i18n.t('shou-ye')

vscode插件推荐

  1. i18n Ally

  2. Vue i18n

翻译工具推荐

  1. weblate

(完)