【国际化】vue element 国际化 切换语言 中英文 i18n

1、安装i18n

npm i -S vue-i18n

2、创建lang文件夹

src下创建lang文件夹，创建三个文件，分别是 index.js  en.js  zh.js;如下：

2-1、index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import locale from 'element-ui/lib/locale';
import enLocale from './en'
import zhLocale from './zh'
import elementEnLocale from 'element-ui/lib/locale/lang/en'
import elementZHLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: localStorage.lang || 'zh', //默认语言
    messages: {
        en: {
            ...enLocale,
            ...elementEnLocale
        },
        zh: {
            ...zhLocale,
            ...elementZHLocale
        }
    }
})

// 国际化

locale.i18n((key, value) => i18n.t(key, value))

export default i18n

2-2、en.js (英文文件)

export default {
    "Chinese": "Chinese",
    "English": "English",
    "Language": "Language",

    // ......
}

2-3、zh.js (中文文件)

export default {
    "Chinese": "中文",
    "English": "英文",
    "Language": "语言切换",
}

3、入口文件引入

// 入口文件 main.js

.....


import i18n from '@/lang'

.....


// 注意要注入vue实例
new Vue({
    router,
    store,
    i18n,
    render: h => h(App)
}).$mount('#app')

4、创建切换语言的组件

比如 dropdowm 下拉组件 lang.vue 如下：

<template>
  <div class="lang-switch">
    
    <el-dropdown @command="switchLang">
      <span class="el-dropdown-link">
        {{$t('Language')}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item 
        v-for="item in langs"
        :key="item.command"
        :command="item.command"
        >{{item.label}}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  data () {
    return {
      langs: [{
        command: 'zh',
        label: this.$t('Chinese')
      },{
        command: 'en',
        label: this.$t('English')
      }]
    }
  },
  methods: {
    // 切换中英文
    switchLang (lang) {
      this.$i18n.locale = lang;
      localStorage.setItem("lang", lang);
      const loading = this.$loading({
        lock: true,
        text: '语言切换中，马上回来......',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        //location.reload();
        loading.close();
      }, 1500);
      
    }
  }
}
</script>

<style>

</style>

end ~~