vue-i18n国际化2020-11-02

1、安装 vue-i18n

npm install vue-i18n --save

2、为防止在main.js中代码过于冗余 则在src下面新建language文件夹

2.1 在language下面新建i18n.js 文件以及自己所需要的语言包

import Vue from 'vue'

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({

    locale:  'en',

    messages: {

        'en': require('./language-en'),

        'zh': require('./language-zh'),

        'jp': require('./language-jp'),

    }

  })

export default i18n

3.在main.js中引入i18n.js

import i18n from './language/i18n';

new Vue({

  i18n,

  router,

  store,

  render: h => h(App)

}).$mount("#app");

4. 在language下面建立所需要的语言包（此处只列举中/英文）

language-en.js

export const m = { 

    name: 'name',

  }

language-zh.js

export const m = { 

    name: '名称',

  }

需要国际化的字段

{{$t('m.name')}}

切换语言

  切换语言

export default {

  methods: {

    toggle(){

        if ( this.lang === 'en' ) {

          this.lang = 'zh';

       }else {

          this.lang = 'en';

       }

          this.$i18n.locale = this.lang;//关键语句

    }

  },

};