vue插件 vueI18n国际化
背景
最近在做的一个项目中有中英文切换的需求，结合使用的技术栈是vue，所以使用vue-i18n插件配合进行国际化的处理。
用法
注意点：在项目开发中，我们需要使用模块化的思想来开发，尽可能地把中英文配置文件和实例创建、挂载分开写在不同的文件中，方便后期维护。
1、配置挂载
//index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enLocale from './en'
import zhLocale from './zh'Vue.use(VueI18n)const messages = {en: {...enLocale},zh: {...zhLocale}
}const i18n = new VueI18n({locale: localStorage.getItem('langSet') || 'zh', // set localemessages // set locale messages
})export default i18n//然后再把i18n对象导入main.js中进行挂载即可
//main.js
new Vue({el: '#app',i18n,render: h => h(App)
})
这里我把国际化的文件统一放在lang文件夹中en.js为英文配置文件，zh.js为中文配置文件，index.js为创建I18n实例对象对其进行配置的文件。
2、使用
1.普通文字的中英文转换
内部会通过this.$i18n.locale去判断是显示中文还是英文
Document
{{ $t("btn.text") }}
这样就能显示我们在上面配置文件中的内容了。
2.请求接口的数据
当我们发送数据请求的时候，我们没法直接确定接口数据的内容，然后去转换成英文。
这时候我们需要让后端给我们返回两个数据，一个是英文数据，一个是中文数据，中文数据的字段名和英文数据的字段名可以和后端先约定好。
在我们项目中，英文数据字段名+En=中文字段名，比如title的英文字段为titleEn
封装一个全局方法
//第三个参数为现在是什么语言状态的标识
//我们可以直接使用this.$i18n.locale来获取当前语言状态
function zh_en(item, value, i18n) {if (i18n == 'zh') {return item[value]}else {return item[value + 'En']}
}
3、封装中英文切换组件
{{langMsg[lang]}}
最后贴下vueI18n的官方文档地址，有其他需求的同学可以去阅读官方文档，本文只介绍了其基本用法。 [ https://kazupon.github.io/vue-i18n/zh/started.html#html](https://kazupon.github.io/vue-i18n/zh/started.html#html)
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！