VUE+Element国际化（vue-il8n）实现多语言

1.安装：npm install vue-i18n 2.在main.js引入i18n,注册，并设置element语言

1import i18n from './lang' 
2// set ElementUI lang ,兼容elementui写法
3Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value) })
4new Vue({
5  el: '#app',
6  router,
7  store,
8  i18n,
9  render: h => h(App)
10})

3.src/lang/index.js文件中

1import Vue from 'vue'
2import VueI18n from 'vue-i18n'
3import Cookies from 'js-cookie'
4import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
5import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
6import enLocale from './en'
7import zhLocale from './zh'
8
9Vue.use(VueI18n)
10
11const messages = {
12  en: {
13    ...enLocale,
14    ...elementEnLocale
15  },
16  zh: {
17    ...zhLocale,
18    ...elementZhLocale
19  },
20
21}
22export function getLanguage() {
23  const chooseLanguage = Cookies.get('language')
24  // const chooseLanguage = localStorage.get('language')
25  if (chooseLanguage) return chooseLanguage
26
27  // if has not choose language
28  const language = (navigator.language || navigator.browserLanguage).toLowerCase()
29  const locales = Object.keys(messages)
30  for (const locale of locales) {
31    if (language.indexOf(locale) > -1) {
32      return locale
33    }
34  }
35  return 'en'
36}
37const i18n = new VueI18n({
38  // set locale
39  // options: en | zh | es
40  locale: 'zh',
41  // set locale messages
42  messages
43})
44
45export default i18n

4.准备语言包

5.使用方式 （1）双括号{{$t('xxx.yyy')}}

<p @click="showWarning">{{$t('login.username')}}

(2)绑定到属性上 :prop="$t('xxx.yyy')"

:placeholder="$t('placeholder.date')">

（3）在js中使用${this.$t('xxx.yyy')}//注意使用反引号

`${this.$t('xxx.yyy')}`