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");    },
相关推荐
拾光拾趣录几秒前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
Mintopia1 分钟前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
归于尽2 分钟前
浏览器和 Node.js 的 EventLoop,原来差别这么大
前端·node.js·浏览器
雲墨款哥3 分钟前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob02347 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder12 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder13 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep20 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛25 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
晴殇i34 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css