安装 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

(完)