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

桃扇骨 2022-12-07 15:12 408阅读 0赞

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

![在这里插入图片描述][20200916152218585.gif_pic_center]

### 目录 ###

*  vue-i18n国际化使用，vue-elementui中使用vue-i18n国际化多语言工具
 *   *  1.安装
     *  2.main.js
     *  3.新建lang文件夹
     *   *  index.js
         *  zh.js
         *  en.js
     *  4.设置语言app.js 在vuex中加入
     *  5. langSelect.vue
     *  6.getter.js加入
     *  使用
     *   *   *  方法一
             *  方法二

## 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>
    
    
          {
       { $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` 后台管理系统

[20200916152218585.gif_pic_center]: /images/20221123/ede78e8e5efd4484a7e6c7db3bdc8216.png