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

一枚前端小姐姐2023-11-14 11:58

vue-i18n与vue存在版本兼容性问题，vue2.x需要使用 8.9.0以下版本的vue-i18n，本项目用的vue 2.5.2，配合vue-i18n 8.2.1版本使用

一、安装

sql 复制代码

npm install vue-i18n@8.2.1 --save

二、使用

1、准备语言包

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

arduino 复制代码

// 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中引入

python 复制代码

// 引入vue-i18nimport 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中：

bash 复制代码

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

js中：

ini 复制代码

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