vue多语言插件vue-i18n使用介绍

npm install vue-i18n -S

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const messages = {
  //简体中文
  cn: {
    message: {
      hello: '你好',
      author: '龙的传人'
    }
  },
  //英文
  en: {
    message: {
      hello: 'Hello',
      author: 'Chinese'
    }
  },
  // 繁体中文
  tw: {
    message: {
      hello: '你好',
      author: '龍的傳人'
    }
  }
}

const i18n = new VueI18n({
  locale: 'cn', // 默认语言
  messages
})

new Vue({
  el: '#app',
  router,
  i18n, // i18n
  template: '<App/>',
  components: { App }
})

<h1>{{ $t("message.hello") }}</h1>

computed:{
    hello(){
       return this.$t("message.hello") + this.$t("message.author");
    } 
}

this.$i18n.locale = 'en' // 切换英文

// cn.js
export default {
  message: {
    hello: '你好',
    author: '龙的传人'
  }
}

// en.js
export default {
  message: {
    hello: 'Hello',
    author: 'Chinese'
  }
}

import cnlang from './lang/cn.js'
import enlang from './lang/en.js'
const i18n = new VueI18n({
  locale: 'cn', // 默认语言
  messages: {
    'cn': cnlang,
    'en': enlang
  }
})