vuei18n前端国际化使用,vuei18n动态国际化

vuei18n前端国际化使用,vuei18n动态国际化,vue使用i18n实现国际化的方法详解

本文主要介绍vue如何利用i18n实现国际化的相关信息。通过示例代码进行了非常详细的介绍,对大家学习或使用vue有一定的参考价值。和有需要的朋友一起学习吧。

一、前言

需要在4k广告机中实现多语言切换。此时前端框架众多,其中几个流行的框架都有匹配的国际插件工具。例如:

vue vue-i18n

角度-角度平移

反应反应国际

jquery jquery.i18n.property

4K广告机项目使用的前端框架是Vue,所以我们将使用vue-i18n插件来实现国际化功能。

二、最终实现效果

三、国际化的实现

1.首先,在自己的项目中安装vue-i18n依赖包。在这里,NPM用于安装。如果没有科学上网,请使用CNPM进行安装。

npm安装vue-i18n -保存-开发

2.将i18n引入vue实例,在项目中实现调用API和模板语法。现在在main.js中介绍vue-i18n

从“vue-i18n”//import vue-i18n导入VueI18n

vue . use(vue i18n);//将其作为插件挂载

/* - */

const i18n=new VueI18n({

区域设置:“CN”,//语言ID

消息:{

恩:{

消息:{

你好:“你好,世界”

}

},

cn: {

消息:{

你好:“你好,世界”

}

}

}

})

/* - */

const i18n=new VueI18n({

区域设置:“zh”,//语言ID

//这个。$i18n.locale //通过切换locale的值实现语言切换

消息:{

Zh :要求(。/common/lang/zh ),//中文语言包

En :要求(。/common/lang/en )//英语语言包

}

})

/* eslint-禁用no-new */

新Vue({

埃尔: #app ,

I8n,//安装到实例中,并且它必须在这个位置,而不是在组件中。

模板:“App/”,

组件:{

应用

}

});

上面的代码将vue-i18n正式引入vue项目,创建一个i18n实例对象,方便全局调用。我们通过这个来转换语言。$i18n.locale

3.接下来,我们需要创建两个新的js文件(或josn文件)作为语言包。

en.js语言包中的代码是:

模块.导出={

消息:{

登录:“登录”,

用户名:“用户名”,

密码:“密码”,

验证码:“验证码”,

语言:“语言”,

张:“中国人”,

恩:“英语”

}

}

zh.js语言包中的代码是:

模块.导出={

消息:{

登录:“登录”,

用户名:“用户名”,

密码:“密码”,

验证码:“验证码”,

语言:“语言”,

张:“中国人”,

恩:“英语”

}

}

最后,我们只需要通过触发事件来控制locale的值,调用相应的语言包来实现国际化。

4.组件中的触发事件切换locale的值,从而实现语言切换。模板代码:

div class=lang

El-radio-group v-model= language size= mini

El-radio v-for= item of lang :label= item . value border { { item . label } }/El-radio

/el-radio-group

/div

Scrpit代码:

从“vue”导入Vue

导出默认值{

已安装(){

这个。$i18n.locale===zh ?this . language=0:this . language=1//加载数据时,判断当前属于哪种语言,为其单选按钮赋值。

},

data() {

返回{

语言:0,

郎:[{

标签:这个。$t(message.zh ),//一种模板语法

值:0

}, {

标签:这个。$t(message.en ),

值:1

}],

}

},

观察:{//监听器

Language: function (val) {//监听单选按钮的变化,从而切换语言。

val===0?这个。$i18n.locale=zh :这个。$ i18n.locale= en

Vue.set(this.lang,0,{label: this。$t(message.zh ),值:0 });

Vue.set(this.lang,1,{label: this。$t(message.en ),值:1})

/**

this.lang: [{

标签:这个。$t(message.zh ),//如果不使用Vue.set,也可以使用更新数据的方法。

值:0

}, {

标签:这个。$t(message.en ),

值:1

}]

**/

}

},

}

注意:

由于JavaScript的限制,Vue无法检测到当前变化的数组,只能渲染一次。如果数据没有更新视图,组件将不会更新。如果切换语言,您需要更新数据以在组件内切换多种语言。

四、vue-i18n 数据渲染的模板语法

模板语法暂时分为三种类型:

//使用//vue组件模板

div{{$t(message.zh)}}/div

//使用//vue组件模板的数据绑定

input:placeholder= $ t( message . zh )/input

//赋值在//vue组件数据中的使用

数据:{

味精:这个。$ t( message . zh );

}

五、Element UI组件库与vue-i18n的兼容问题

由于项目中使用了Element UI组件库,其中的一些内置字也需要国际化。幸运的是,Element UI有国际化支持。但是Element UI默认只兼容vue-i18n的5.x版本,现在vue-i18n的版本已经到了7.x,在Element UI官方文档的“国际化”一节中有具体的解释。粘贴下面的手动设置:

从“vue”导入Vue

从“element-ui”导入ElementUI

从“vue-i18n”导入VueI18n

从 Element-ui/lib/locale/lang/en //English包中导入区域设置以引入元素UI

从元素ui的“Element-UI/lib/locale/lang/zh-cn”//Chinese包中导入区域设置

vue . use(vue i18n);

Vue.use(ElementUI,{

i18n:(键,值)=i18n.t(键,值)

});//兼容i18n 7.x版本设置

const i18n=new VueI18n({

区域设置:“zh”,//语言ID

消息:{

zh:object . assign(require( @/components/common/lang/zh ),zhlocale),//这里要注意如何导入多个语言包。

en:object . assign(require( @/components/common/lang/en )、enLocale),

}

});

注意:

关于导入多个语言包时遇到的问题,我在Element UI的国际化文档中找到了解决方案。

六、路由与面包屑导航国际化的语法问题

不知道面包屑导航如何国际化?在网上翻了一些资料,得到了下面的代码,完美解决了问题:

Router.js(路由配置文件)

{

路径:“/index”,

名字:“导航”。Home ,//直接指出相应的文字

component:(resolve)=require([ @/components/index ],resolve)

}

Breadcrumb.vue(面包屑导航组件)

div id=Breadcrumb

el-breadcrumb分隔符-class=el-icon-arrow-right

El-bread crumb-item:to= { path:/index } { { $ t( nav。Home)}}/el-breadcrumb-item

/* Note {{$t(item.name)}}*/

El-bread crumb-item v-for= item in $ route . matched :to= { path:item . path } { { $ t(item . name)} }/El-bread crumb-item

/el-breadcrumb

/div

七、至此,国际化的坑算是踩完了。

总结

这就是本文的全部内容。希望这篇文章的内容对你的学习或工作有一定的参考价值。谢谢你的支持。

vuei18n前端国际化使用,vuei18n动态国际化