这篇文章给大家介绍vue项目中怎么实现支持多种语言,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
首先咱们不妨把网页中需要转换语言的公共部分提取出来,放到一个对象中,代码如下:
<代码>const消息={
en: {
,信息:{
,你好:& # 39;世界你好# 39;
,}
}, zh型:
{
,信息:{
,你好:& # 39;世界& # 39;
,}
}
}
从上面的代码中可以看的出,你好是一个公众变量,在中文网站中显示为“世界”,在英文网站中为“你好世界”。然后通过对象的属性来区分中英文,然后将这个对象加载到全局。如何加载到全局呢,在Vue的项目中,就需要用到Vue-i18n这个模块。代码如下:
主要。js
<代码>从& # 39;进口Vue Vue # 39;
从& # 39;进口程序。/应用# 39;
从& # 39;进口VueI18n vue-i18n& # 39;
const消息={
en: {
,信息:{
,你好:& # 39;世界你好# 39;
,}
}, zh型:
{
,信息:{
,你好:& # 39;世界& # 39;
,}
}
}
Vue.use (VueI18n)
const i18n=new VueI18n ({
语言环境:& # 39;zh型# 39;,
消息
})
新Vue ({
, i18n,
,模板:& # 39;& lt; App/祝辞& # 39;,
,组件:{应用},
})。美元山(& # 39;#应用# 39;)
,App.vue源码:
<代码>& lt; template>
, & lt; h2> {{$ t (“message.hello")}} & lt;/h2>
& lt;/template>
& lt; script>
导出创建的默认{
, () {
,,console.log(这个。$ t (“message.hello"))
,}
}
& lt;/script>
& lt; style>
& lt;/style>
打印结果为<强>世界强劲,因为在创建vue-i18n实例的过程中我们传入了两个参数,当地和messages.local标识用哪国语言,当地传入的是,消息包含着自定义的语言模块。如果当地出传入的是在那打印的结果就会变成的<>世界你好。
然后在实例化组件的过程中将i18n传入,这样组件中就可以访问<强> $ t 这个函数了,通过这个函数,我们可以取中出消息的属性值,将其渲染到页面中。
核心是在实例化的过程中通过当地这个参数来实现实现语言的切换,消息来实现语言包的加载,开发者只需将需要翻译的公共部分抽离出来放到消息中即可。
关于vue项目中怎么实现支持多种语言就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
