vue-i18n国际化使用，vue-elementui中使用vue-i18n国际化多语言工具

vue-i18n国际化使用，vue-elementui中使用vue-i18n国际化多语言工具

1.安装

npm i vue-i18n -S

2.main.js

import i18n from './lang' // internationalization
// 修改vue引入elementui
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})
// 引入 i18n
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

3.新建lang文件夹

新建 src/lang文件夹，包含index.js zh.js en.js

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)

const messages = {
  en: {
    ...enLocale,
    ...elementEnLocale
  },
  zh: {
    ...zhLocale,
    ...elementZhLocale
  }
}
export function getLanguage() {
  const chooseLanguage = Cookies.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 'en'
}
const i18n = new VueI18n({
  // set locale
  // options: en | zh | es
  locale: getLanguage(),
  // set locale messages
  messages
})

export default i18n

zh.js

export default {
  route: {
    dashboard: '首页',
    example: '综合实例',
    table: '表格',
    tree: '树',
    form: '表单'
  },
  navbar: {
    changeLanguage: '简体中文'
  }
}

en.js

export default {
  route: {
    dashboard: 'Dashboard',
    example: 'Example',
    table: 'Table',
    tree: 'Tree',
    form: 'Form'
  },
  navbar: {
    changeLanguage: 'English'
  }
}

4.设置语言app.js 在vuex中加入

const mutations = {
  SET_LANGUAGE: (state, language) => {
    state.language = language
    Cookies.set('language', language)
  }
}

const actions = {
  setLanguage({ commit }, language) {
    commit('SET_LANGUAGE', language)
  }
}

5. langSelect.vue

在Navbar.vue中引入 langSelect.vue 使用切换语言

<template>
  <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
    <div>
<!--      <svg-icon class-name="international-icon" icon-class="language" />-->
<!--      切换语言-->
      {{ $t('navbar.changeLanguage') }}
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item :disabled="language==='zh'" command="zh">
        中文
      </el-dropdown-item>
      <el-dropdown-item :disabled="language==='en'" command="en">
        English
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  computed: {
    language() {
      return this.$store.getters.language
    }
  },
  methods: {
    handleSetLanguage(lang) {
      this.$i18n.locale = lang
      this.$store.dispatch('app/setLanguage', lang)
      this.$message({
        message: 'Switch Language Success',
        type: 'success'
      })
    }
  }
}
</script>

6.getter.js加入

language: state => state.app.language;

使用

方法一

在页面中使用可以用this.$t('route.dashboard')

方法二

也可以提炼出来一个公共方法

// translate router.meta.title, be used in breadcrumb sidebar tagsview
export function generateTitle(title) {
  const hasKey = this.$te('route.' + title)

  if (hasKey) {
    // $t :this method from vue-i18n, inject in @/lang/index.js
    const translatedTitle = this.$t('route.' + title)

    return translatedTitle
  }
  return title
}

使用：generateTitle(dashboard),适用于路由中

也可以修改一下 this.$te(title)

此方法出自 vue-element-admin 后台管理系统