vue 项目的I18n国际化之路

 

1、引入插件

      npm install vue-i18n

2、main.js配置

import VueI18n from 'vue-i18n' //引入国际语言切换
Vue.use(VueI18n) // 通过插件的形式挂载

const i18n = new VueI18n({
    locale: 'zh-CN', // 语言标识
    //this.$i18n.locale // 通过切换locale的值来实现语言切换
    messages: {
        'zh-CN': require('./common/lang/zh'), // 中文语言包
        'en-US': require('./common/lang/en') // 英文语言包
    }
})



new Vue({
    el: '#app',
    store,
    router,
    i18n,//千万别忘了这里
    template: '<router-view :key="key"></router-view>',
    computed: {
        key() {
            return this.$router.name !== undefined ? this.$router.name + +new Date() : this.$router + +new Date()
        }
    }
})

3、中英文切换语言包

en.js 英文语言包：

export const m = { 
  music: 'Music',//网易云音乐
  findMusic: 'FIND MUSIC',//发现音乐
  myMusic: 'MY MUSIC',//我的音乐
  friend: 'FRIEND',//朋友
  musician: 'MUSICIAN',//音乐人
  download: 'DOWNLOAD'//下载客户端
}

zh.js中文语言包： 

export const m = {
  music: '网易云音乐',
  findMusic: '发现音乐',
  myMusic: '我的音乐',
  friend: '朋友',
  musician: '音乐人',
  download: '下载客户端'
}

4、切换语言

    

 if ( this.lang === 'zh-CN' ) {
          this.lang = 'en-US';
          this.$i18n.locale = this.lang;//关键语句
       }else {
          this.lang = 'zh-CN';
          this.$i18n.locale = this.lang;//关键语句
       }

 

5、页面如何显示

<span v-text="$t('m.music')"></span>

<span>{{$t('m.music')}}</span>

 

js中使用

this.$t('状态')