16.使用vue-i18n实现国际化

需求

比如项目需要国际化，点击按钮切换中文/英文

1、安装

npm install vue-i18n --save

2、注入 vue 实例中

import Vue from 'vue'
import router from './router/router.js'
import i18n from './template/i18n'

new Vue({
  el: '#app',
  i18n,
  router
});

3 、引入的文件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import zh from '../common/lang/zh'
import en from '../common/lang/en'

Vue.use(VueI18n);

export default new VueI18n({
  locale: 'zh',    // 语言标识
  messages: {
    'zh': zh,
    'en': en
  }
});

4 、两个文件

export default {
  title : 'welcome'
}

export default {
  title : '欢迎'
}

5 、使用

<template>
  <div>
      {{$t("title")}}
      <button @click="setLanguage">change</button>
  </div>
</template>
<script>
export default {
  methods:{
    setLanguage(){
      this.$i18n.locale = this.$i18n.locale === 'zh'? 'en' : 'zh';
    }
  }
}
</script>