vue项目如何用vue-i18n实现国际化

在vue项目的开发中，如果你的项目面对的是来自世界各地的用户，那么你就要考虑你的项目是否需要进行国际化，比如常见的国际化就是讲项目里面的菜单、操作按钮设置成英文或者奇特语言，这样保证在国外用户在访问的时候也有一个很好的用户体验，这就要求我们在开发中进行国际化配置，在vue项目中，我们可以直接用vue-i18n这个插件进行国际化。下面介绍一下怎么用vue-i18n这个插件来实现国际化。

1、安装vue 国际化插件

npm I vue-i18n -S

2、在main.js中引入vue-i18n，然后创建还有选项的vuei18n实例，再把i18n挂载到vue根实例上

// main.js

import Vuei18n from ‘vue-i18n’

Vue.use(Vuei18n)

const i18n new VueI18n({

locale: ‘en’, // 语言标识

messages:{

  ‘zh’:require(’./i18n/lang/zn’),

  ‘en’:require(’./i18n/lang/en’)
 }

})

const app = new Vue({

router,

i18n

}).$mount("#app")

3、在项目根目录新建i18n目录，并新建对应的js文件

// zh.js

const message = {

title: 我是中文

}

// en.js

const message = {

title: 我是英文

}

4、页面引用

{{$t('message.title')}}

5、切换语种，将this.$i18n.locale的值改成zh或en就可以完成切换

let lang = this.$i18n.locale

if(lang === ‘zh’){

this.$$i18n.locale = ‘en’

}

if(lang === ‘en’){

this.$i18n.locale = ‘zh’

}

本文章由javascript技术分享原创和收集