# 一、概述

vue-i18n是一个 Vue.js 的国际化插件，主要作用就是让项目支持国际化多语言。在很多网站中都可以看到它的身影，它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。接下来，我会介绍如何在Vue+ElementUI中集成环境中使用vue-i18n

最终的效果如下：

项目的基本结构如下：

├─public
│      favicon.ico
│      index.html
└─src
    │  App.vue
    │  main.js
    ├─components
    │      Aside.vue
    │      CommonHeader.vue
    ├─lang
    │      en.js
    │      index.js
    │      zh.js
    ├─router
    │      index.js
    ├─store
    │      index.js
    └─views
            Home.vue

GitHub完整代码：https://github.com/shitudouya/vue-i18n_demo

# 二、安装和配置

npm i vue-i18n js-cookie element-ui -S

引入js-cookie的目的是为了将当前选择的语言配置在cookie中，当页面刷新时从cookie中获取选中的语言，这样可以防止页面刷新后无法记住当前选中的语言，当然也可以使用localStorage或sessionStorage保存状态信息。

接着，在src目录下新建lang文件夹，在该文件夹下新建三个子文件，分别是index.js(主入口)，en.js(英文配置文件)，zh.js(中文配置文件)，代码如下：

//zh.js

export default {
  header: {
    home: "首页",
    lang: "切换语言"
  },
  aside: {
    home: "首页",
    pageOne: "页面一",
    pageTwo: "页面二",
    manage: "文章管理",
    center: "个人中心"
  }
};

//en.js

export default {
  header: {
    home: "Home",
    lang: "Switch Language"
  },
  aside: {
    home: "Home",
    pageOne: "Page-One",
    pageTwo: "Page-Two",
    manage: "Article Management",
    center: "Personal Center"
  }
};

//index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
//element-ui需要进行多语言设置 详情：https://element.eleme.cn/#/zh-CN/component/i18n
import elementEnLocale from 'element-ui/lib/locale/lang/en'
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'
//引入自定义配置的语言文件
import enLocale from './en'
import zhLocale from './zh'

Vue.use(VueI18n)
const messages = {
  en:{
    ...enLocale,
    ...elementEnLocale
  },
  zh:{
    ...zhLocale,
    ...elementZhLocale
  }
}

const i18n = new VueI18n({
  //从cookie中获取保存的语言信息，如果不存在默认用中文显示语言
  locale: Cookies.get('language')||'zh',
  messages
})

export default i18n

在main.js配置如下：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import i18n from "./lang/index";
//element-ui默认不支持 6.x 的 vue-i18n，需要手动处理。
Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
});

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  i18n, // 便于可以直接在组件中通过this.$i18n使用
  render: (h) => h(App)
}).$mount("#app");

之后我们就可以在vue的组件里使用i18n了，使用方法主要是两种：

在组件的template中，调用$t()方法，或者在组件的script中，调用this.$i18n.t()方法

<el-menu-item-group>
        <el-menu-item index="1-1"> {{ $t("aside.pageOne") }}</el-menu-item>
        <el-menu-item index="1-2">{{ $t("aside.pageTwo") }}</el-menu-item>
</el-menu-item-group>

最后一步是实现语言的切换功能，我们可以借助element-ui中的Dropdown 下拉菜单实现这个功能，代码如下：

<!-- template -->
<el-dropdown @command="handleCommand">
    <span class="el-dropdown-link">
        {{ $t("header.lang") }}<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="zh">中文</el-dropdown-item>
        <el-dropdown-item command="en">English</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>

//script 
import Cookies from "js-cookie";
export default {
  data() {
    return {};
  },
  methods: {
    handleCommand(command) {
      this.$i18n.locale = command;
      Cookies.set("language", command);
    }
  }
};

最后，还有一些element-ui基本布局什么的，没有在这篇文章详细说明，大家可以参考完整的源码，已经放在GitHub上了，顶部有说明哦