vue2.0+element+vue-i18n手动切换国际化

当前element版本为2.15.8， vue-i18n版本为8.26.7

首先创建一个文件，文件下包含zh.js、en.js、index.js，如有其他语言需求在新增

zh.js

import zh from 'element-ui/lib/locale/lang/zh-CN';
export default {
    ...zh,
    login: {
        password: "密码",
        username: "用户名",
        login: "登录"
    }
}

en.js

import en from 'element-ui/lib/locale/lang/en';
export default {
    ...en,
    login: {
        password: "password",
        username: "username",
        login: "Sing in"
    }
}

index.js

import Vue from "vue"
import VueI18n from "vue-i18n"

Vue.use(VueI18n);
// 循环设置每个语言包
let langFiles = require.context("./config", false, /\.js$/);
let messages = {};
let reg = /^\.\/([^\.]+)\.([^\.]+)$/
langFiles.keys().forEach(key => {
    if (key in messages) {
        return
    }
    let langName = reg.exec(key)[1];
    messages[langName] = langFiles(key).default
})
export default new VueI18n({
    locale: localStorage.getItem("lang") || "zh",
    messages
})

main.js

 

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import i18n from "./i18n"
import ElementUI from "element-ui"
// 匹配element-ui自带语言
Vue.use(ElementUI,{
    i18n:(key,value)=>i18n.t(key,value)
});
Vue.config.productionTip = false
new Vue({
    router,
    store,
    render: h => h(App),
    i18n
}).$mount('#app')

<template>
  <div id="app" ref="app">
      <el-button type="primary" v-for="(item, key) in obj" @click="handleCutLang(key)">{{ item }}</el-button>
      <div>{{ langName }}</div>    
  </div>
</template>
<script>
	export default {
      provide() {
        return {
          reload: this.reload
        }
      },
      data() {
        return {
            obj: {
              en: "English",
              zh: "中文"
            },
            langName:"",
        }
      },
      methods: {
          handleCutLang(lang) {
              this.langName = this.obj[lang];
              localStorage.setItem('lang', lang);
          	  window.location.reload(); // 切换语言后，需要重新渲染
          },
      }
    }
</script>

v-for循环遍历对象  

 

<div v-for="(val, key, index) in list">
  <span>值：{{ val }}</span>
  <span>键：{{ key }}</span>
  <span>索引：{{ index }}</span>
</div>

list: {
	'1': 'name',
	'2': 'sex',
	'5': 'age'
}