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");    },
相关推荐
小图图7 小时前
Claude Code 黑箱揭秘
前端·后端
吃饺子不吃馅7 小时前
为什么SnapDOM 比 html2canvas截图要快?
前端·javascript·面试
这里有鱼汤8 小时前
miniQMT下载历史行情数据太慢怎么办?一招提速10倍!
前端·python
用户21411832636028 小时前
dify案例分享-免费玩转 AI 绘图!Dify 整合 Qwen-Image,文生图 图生图一步到位
前端
IT_陈寒8 小时前
Redis 性能翻倍的 7 个冷门技巧,第 5 个大多数人都不知道!
前端·人工智能·后端
mCell15 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip15 小时前
Node.js 子进程:child_process
前端·javascript
excel18 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel19 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼21 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js