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

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");    },
相关推荐
别拿曾经看以后~15 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死18 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人29 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人30 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR35 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香37 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969340 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍