vue-i18n实现国际化语言

第一步  安装vue-i18n

 

npm install vue-i18n --save

 

第二步：新建一个语言包文件lang  里面分别是中文包跟英文包

 

 

第三步 配置main.js

 

import VueI18n from 'vue-i18n'

/* 平台国际语言静态字典 */

import LangEn from './common/lang/LangEn'

import LangZh from './common/lang/LangZh'

 

 

/* vue-i18n注册 */

Vue.use(VueI18n)

// 设置语言项

const i18n = new VueI18n({

locale: 'zh', //默认中文

messages: {

'en': LangEn,

'zh': LangZh, //中文

}

})

 

 

new Vue({

el: '#app',

router,

store,

i18n,

components: { App },

template: '<App/>'

})

 

语言包文件如下

中文包

 

英文包

 

 

页面使用

home.vue

页面拿值：{{$t("homePage.goodsList.commodityType1")}}

 

 

 

js里更改语言

 

通过this.$i18n.locale去更改语言

 

在js里更改msg的值  this.msg = this.$t('homePage.options')