在vue 使用i18n

许多项目需要做语言国际化，那就可以用到i18n了，在vue 中用到的插件是vue-i18n

1.安装依赖包

npm install vue-i18n 

或者

yarn add vue-i18n

2.创建语言包、i18n实例对象，并在main.js中引入：

|-- main.js 导入文件
|-- i18n
  |-- index.js 创建实例对象
  |-- languages 各种语言包
    |-- en_us.json  英文包
    |-- id_us.json  中文包

i18n/index.js，创建i18n实例对象，代码如下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)
 
// 注册i18n实例并引入语言文件
const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    'zh': require('./languages/zh_cn'),
    'en': require('./languages/en_us')
  }
})

export default i18n

接下来我们就需要新建两个js文件（或者josn文件）作为语言包。
其中zh.js中文包中代码为i18n/languages/zh：

module.exports = {
  message: {
    login: '欢迎登录',
    lang:{
      zh: '中文',
      en: '英文'
    }
  }
}

其中en.js英文包中代码为i18n/languages/en：

module.exports = {
    message: {
      login: 'Welcome To Login',
      lang: {
        zh: 'Chinese',
        en: 'English'
      }
    }
   }

将i18n实例对象挂载到Vue实例之上：main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import "@/assets/plugins/element-ui";
import i18n from '@/assets/plugins/i18n';

new Vue({
    i18n,  // 挂载到Vue实例之上
    router,
    store,
    render: (h) => h(App),
}).$mount("#app");

3.实现中英文切换按钮，代码如下：

<template>
  <div>
    <el-dropdown
      class="languageBox"
      trigger="click"
      placement="bottom-end"
      @command="changeLanguage"
    >
      <el-button class="languageBtn">
        <div class="languageBtnBox">
          <img v-lazy="currentLanguage.icon" class="languageImg" />
          <span>{{ currentLanguage.label }}</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </div>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="item in languages"
          :key="item.index"
          :command="item.value"
        >
          <div class="languageItem">
            <img :src="item.icon" alt="" />
            <span>{{ item.label }}</span>
          </div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
import Vue from "vue";
export default {
    data() {
        return {
            language: "zh",
        };
    },
computed: {
    currentLanguage() {
      return this.languages.find((item) => {
        return item.value === this.$i18n.locale;
      });
    },
  },
  mounted() {
    this.$i18n.locale = this.$store.state.language;
  },
    methods:{
 changeLanguage(locale) {
      this.$i18n.locale = locale
 }
    },
};
</script>