vue+element-ui+vue-i18n国际化改造

vue-i18n与vue存在版本兼容性问题，vue2.x需要使用 8.9.0以下版本的vue-i18n，本项目用的vue 2.5.2，配合vue-i18n 8.2.1版本使用。vue3写法大同小异。

一、安装

npm install vue-i18n@8.2.1 --save

二、使用

1、准备语言包

在 assets 下创建 lang 文件夹，并创建三个文件，分别是中文、英文、阿拉伯，zh.js 、 en.js 、ar.js 。

// zh.js
export default {
  message:{
    Edit: "编辑",
    Cancel: "取消",
  }
};


// en.js
export default {
  message:{
    Edit: "Edit",
    Cancel: "Cancel",
  }
};


// ar.js
export default {
  message:{
    Edit: "تعديل",
    Cancel: "الغاء",
  }
};

2、配置

在main.js中引入

// 引入vue-i18n
import VueI18n from 'vue-i18n'
// 引入中文语言包
import zh from './assets/lang/zh.js';
// 引入英文语言包
import en from './assets/lang/en.js';
//引入阿拉伯语言包
import ar from './assets/lang/ar.js';
//引入element语言包
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import arLocale from 'element-ui/lib/locale/lang/ar'
import ElementLocale from 'element-ui/lib/locale'

Vue.use(VueI18n)  // 全局注册国际化包

// 准备翻译的语言环境信息
const messages = {
  en: {
    ...en,
    ...enLocale
  },
  zh: {
    ...zh,
    ...zhLocale
  },
  ar: {
    ...ar,
    ...arLocale
  }
}

const i18n = new VueI18n({
  locale: "zh",   // 初始化中文
  messages
});
ElementLocale.i18n((key, value) => i18n.t(key, value))

new Vue({
  el: '#app',
  router,
  store,
  i18n,   // 注入语言
  components: { App },
  template: '<App/>'
});

3、模板渲染

html中：

<p>{{ $t("message.Edit") }}</p>

js中：

 judgeLastDaysType() {
      this.btnText = this.$t("message.Cancel");
},

单页面中也可以这样使用

//引入vue-i18n
import { useI18n } from "vue-i18n";
//下面这行代码要写在所有代码前面
const { locale,t } = useI18n();

this.btnText = t("message.Cancel");

//更换语言
locale.value  = "ar"