1. 安装vue-i18n

cnpm install vue-i18n@8.22.4 --save-dev 默认安装是9点多版本，发现启动后报错，就找到了这个版本安装的

2. 按需引入elementUi,这个可以参考官网

新建一个elementUI.js文件

import Vue from "vue";
import {
  Select,
  Option,
  Pagination,
  Radio,
  RadioGroup,
  Input,
  Checkbox,
  CheckboxGroup,
  Upload,
  DatePicker,
  Dialog,
  Popover,
  Button,
  Loading,
} from "element-ui"; // 引入 element-ui
Vue.use(Select);
Vue.use(Option);
Vue.use(Pagination);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Input);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Upload);
Vue.use(DatePicker);
Vue.use(Dialog);
Vue.use(Popover);
Vue.use(Button);
Vue.use(Loading.directive);

3.引入VueI18n

修改main.js文件

可以全引elementUI，我是按需引入，全引的参考注释部分

// import ElementUI from "element-ui";
import "./assets/js/elementUI";
import "element-ui/lib/theme-chalk/index.css";
// import locale from "element-ui/lib/locale/lang/en";
// Vue.use(ElementUI, { locale });
import VueI18n from "vue-i18n";
import enLocale from "element-ui/lib/locale/lang/en"; //引入Element UI的英文包
import zhLocale from "element-ui/lib/locale/lang/zh-CN"; //引入Element UI的中文包
Vue.use(VueI18n); //通过插件的形式挂载
// Vue.use(ElementUI, {
//   i18n: (key, value) => i18n.t(key, value),
// });
/*---------使用语言包-----------*/
const i18n = new VueI18n({
  locale: "zh", // 语言标识
  messages: {
    zh: Object.assign(require("@/lang/zh"), zhLocale), //这里需要注意一下，是如何导入多个语言包的
    en: Object.assign(require("@/lang/en"), enLocale),
  },
});

new Vue({
  i18n,
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

在src里面新建lang文件夹，lang文件里面新建en.js和zh.js

en.js

module.exports = {
  message: {
    login: "Login",
    Username: "Username",
    Password: "Password",
    Captcha: "Captcha",
    Language: "Language",
    zh: "Chinese",
    en: "English",
  },
  country: {
    china: "China",
    america: "America",
    britain: "Britain",
  },
};

zh.js

module.exports = {
  message: {
    login: "登录",
    Username: "用户名",
    Password: "密码",
    Captcha: "验证码",
    Language: "语言",
    zh: "中文",
    en: "英文",
  },
  country: {
    china: "中国",
    america: "美国",
    britain: "英国",
  },
};

4.使用

<template>
  <div class="about">
    <div class="lang">
      <el-radio-group v-model="language" size="mini">
        <el-radio v-for="item of lang" :label="item.value" :key="item.value">{{
          item.label
        }}</el-radio>
      </el-radio-group>
    </div>
    <ul>
      <li v-for="item in country" :key="item.id">{{ $t(item.name) }}</li>
    </ul>
    <el-button type="primary" @click="addBritain">点击增加英国</el-button>
  </div>
</template>

<script>
import utils from "@/assets/js/utils"; // 引入工具函数
import ossClient from "@/assets/js/aliyun.oss.client";
export default {
  data() {
    return {
      language: 0,
      lang: [
        {
          label: this.$t("message.zh"), //模板语法的一种
          value: 0,
        },
        {
          label: this.$t("message.en"),
          value: 1,
        },
      ],
      country: [
        {
          id: 1,
          name: "country.china",
        },
        {
          id: 2,
          name: "country.america",
        },
      ],
    };
  },
  mounted() {
    if (this.$store.state.token) {
      this.token = this.$store.state.token;
    }
    this.$i18n.locale === "zh" ? (this.language = 0) : (this.language = 1); //数据加载时判断当前属于哪种语言，为其单选按钮赋值
  },
  watch: {
    //侦听器
    language: function (val) {
      //侦听单选按钮的变化，从而进行切换语言
      val === 0 ? (this.$i18n.locale = "zh") : (this.$i18n.locale = "en");
      this.lang = [
        {
          label: this.$t("message.zh"), //如果不使用Vue.set，也可以使用更新数据的方法
          value: 0,
        },
        {
          label: this.$t("message.en"),
          value: 1,
        },
      ];
    },
  },
  methods: {
    addBritain() {
      this.country.push({
        id: 3,
        name: "country.britain",
      });
    },
  },
};
</script>