使用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
});
 

引入的文件代码

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
  }
});

被引入的两个中英文文件

en

export default {
  title : 'welcome'
}

zh

export default {
  title : '欢迎'
}

3、使用

<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>