组件库中怎么使用vue-i18n

这篇文章主要介绍了组件库中怎么使用vue-i18n的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇组件库中怎么使用vue-i18n文章都会有所收获，下面我们一起来看看吧。

项目中使用 i18n

不赘述，这里只是做个比较参考，直接抄官方文档

importVuefrom'vue'importVueI18nfrom'vue-i18n'Vue.use(VueI18n)//准备翻译的语言环境信息constmessages={en:{message:{hello:'helloworld'}},ja:{message:{hello:'こんにちは、世界'}}}//通过选项创建VueI18n实例consti18n=newVueI18n({locale:'ja',//设置地区messages,//设置地区信息})//通过`i18n`选项创建Vue实例newVue({i18n}).$mount('#app')

<template><divid="app"><p>{{$t("message.hello")}}</p></div></template>

组件库中使用 i18n

需求

• 组件库代码中配置 i18n ，并在组件中注册和使用

• 页面中若使用 i18n，可以合并和覆盖组件库的 i18n 配置

• element-ui 的 i18n 在组件库中注册，页面无需再注册

• 页面切换语言时，组件库和 element-ui 的语言也一起切换

未添加 i18n 前的组件库

正常组件库的入口文件，是一个很标准的 export ，供页面进行 Vue.use() 调用。

这个模块没有特殊意义，只是作为基础代码展示，以及与下面加入 i18n 的代码做对比。

const&nbspponents={};//具体封装的组件这里不做赘述constinstall=function(Vue,options={}){Object.keysponents).forEach((key)=>{Vueponent(key,&nbspponents[key]);});};/*istanbulignoreif*/if(typeofwindow!=='undefined'&&window.Vue){install(window.Vue);}exportdefault{version,install,..ponents};

组件库 i18n 的配置文件

先在 ./lang 路径下新建语言文件，如 en.js、zh.js 等（数据格式参考 vue-i18n）

importVuefrom'vue';importVueI18nfrom'vue-i18n';Vue.use(VueI18n)//配置从文件读取constreq=require.context('./lang',false,/.js$/)constmodules=req.keys().map(k=>{letname=k.match(/./(.+).js/)[1]return{name:name,webLocale:req(k).default,elementLocale:require(`element-ui/lib/locale/lang/${name}`).default//加入element的i18n}})//注册i18nleti18n=newVueI18n({locale:'zh',messages:getMessages(),})//对外暴露的合并配置项的方法exportfunctioni18nLocale(config,lang='zh'){i18n=newVueI18n({locale:lang,messages:getMessages(config),})returni18n;}//合并方法functiongetMessages(config=[]){returnmodules.reduce((sum,item)=>{letconf=config.find(m=>m.locale===item.name)||{};letlocale=conf.locale||item.name;sum[locale]={...item.elementLocale,//element的语言配置...item.webLocale,//组件库的语言配置...conf.message,//页面的语言配置}returnsum;},{})}exportdefaulti18n;

组件库的输出文件

importi18n,{vueI18nLocale}from'./locale';importelementfrom'element-ui';const&nbspponents={};//具体封装的组件这里不做赘述//传入一个options，为了将element的国际化合并方法传入组件库//经实验，element的国际化合并在页面触发有效，在组件库中触发无效，故此操作constinstall=function(Vue,options={}){Object.keysponents).forEach((key)=>{Vueponent(key,&nbspponents[key]);});//在页面使用组件库，进行Vue.use的时候注册，能保证相同的Vue实例//这句是关键！不能使用Vue.prototype.$i18n=i18n;会报错，报错原因是与vue-i18n内部的变量重名，故这里使用$i18n_代替，但这不影响页面使用$i18nObject.defineProperty(Vue.prototype,'$i18n_',{get(){//此this为页面vue实例，若页面配置了国际化，则使用页面的实例，否则用组件库的国际化returnthis.$i18n||i18n;},configurable:true});//在此注册element，并将页面传入的国际化合并方法，继续传入到elementVue.use(element,{i18n:options.i18n||((key,value)=>i18n.t(key,value))});};/*istanbulignoreif*/if(typeofwindow!=='undefined'&&window.Vue){install(window.Vue);}exportdefault{version,vueI18nLocale,//导出合并语言配置项的方法install,..ponents};

组件库中使用 i18n

因为命名问题，只能使用 this.$i18n_ 而不是 this.$i18n

<divv-bind="$i18n_.t('textPart.textNum')"></div>

项目中使用组件库和 i18n

importVuefrom'vue';importwebfrom'../src/index';//组件库，无需再引用element//页面的国际化配置，同样需要新建对应的语言文件constreq=require.context('./lang',false,/.js$/);constlocaleConfig=req.keys().map((k)=>{letname=k.match(/./(.+).js/)[1];return{locale:name,//需要与组件库的语言类型一一对应message:req(k).default};});//使用组件库暴露的合并配置项方法，获得新的i18n实例//该i18n包含了组件库的i18n和页面的i18nconsti18n=web.i18nLocale(localeConfig,'zh');//注册组件库的同时，传入element的国际化合并方法//此时，该i18n包含了element、组件库、页面的i18nVue.use(web,{i18n:(key,value)=>i18n.t(key,value)});exportdefaultnewVue({el:'#app',router,i18n,//将i18n注册到页面vue实例&nbspponents:{App},template:'<App/>'});

页面展示和切换 i18n

这里能展示 element、组件库、页面 的语言变量，切换语言也是三者一起切换

<template><div><!--两种写法返回值相同--><divv-bind="$t('textPart.textNum')"></div><divv-bind="$i18n.t('textPart.textNum')"></div><div@click="changeI18n">切换语言</div></div></template><script>exportdefault{data(){return{};},methods:{changeI18n(){//这里的this.$i18n包含了element、组件库、页面的i18n//然后这里还有一个this.$i18n_，是单独组件库的i18nthis.$i18n.locale='en';}}};

关于“组件库中怎么使用vue-i18n”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“组件库中怎么使用vue-i18n”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注主机评测网行业资讯频道。

上一篇：Java?web访问localhost:8080/xx/xx.jsp报404错误如何解决

下一篇：JavaScript中的Location.search怎么使用

---