Vue-i18n实现多语言切换

开源地址：https://github.com/bigbigword3/Vue.Crud

安装：i18n

npm i vue-i18n -S

新建语言资源包：

 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
  }
}

const i18n = new VueI18n({
  // set locale
  // options: en | zh | es
  locale: Cookies.get('language') || 'zh',
  // set locale messages
  messages
})

export default i18n

en.js

export default {
  button: {
    add: 'Add',
    edit: 'Edit',
    delete: 'Delete',
    search: 'Search',
    reset: 'Reset',
    submit: 'Submit',
    cancel: 'Cancel',
    clear: 'Clear',
    back: 'Back',
    export: 'Export',
    lang:'English'
  }  
}

zh.js

export default {
  button: {
    add: '添加',
    edit: '修改',
    delete: '删除',
    search: '搜索',
    reset: '重置',
    submit: '提交',
    cancel: '取消',
    clear: '清除',
    back: '返回',
    export: '导出',
    lang:'中文'
  } 
}

注入：

import i18n from './lang' // Internationalization

Vue.use(ElementUI, {   i18n: (key, value) => i18n.t(key, value) })

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

在组件中切换语言：

<template>
   <div>
    <el-dropdown trigger="click" class="international" @command="changeLang">
        <div>
        修改语言
        </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>
    <div >
        <el-button>{{$t('button.add')}}</el-button>
        <el-button>{{$t('button.lang')}}</el-button>
    </div>
   </div>
</template>
<script>
import {mapMutations } from 'vuex'
export default {
    data(){
        return {}
    },
    methods:{
        ...mapMutations('app', [
          'SET_LANGUAGE'
         ]),
        changeLang(lang){
                this.$i18n.locale = lang
                this.SET_LANGUAGE(lang);
                this.$message({
                    message: 'Switch Language Success',
                    type: 'success'
                })
        }
    },
    computed: {
        language() {
            return this.$store.getters.language
        }
  }
}
</script>
<style scoped>
 div{
     margin: 20px;
 }
</style>

运行效果：