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");    },
相关推荐
前端小趴菜0514 分钟前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~1 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.2 小时前
serviceWorker缓存资源
前端
RadiumAg3 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo3 小时前
ES6笔记2
开发语言·前端·javascript
yanlele3 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子4 小时前
React状态管理最佳实践
前端
烛阴4 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子5 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...5 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts