最近项目需要实现多语言的功能，所以记录一下

1. 安装语言配置包

安装vue-i18n包,版本应该是v8.x

cnpm install vue-i18n --save
npm install vue-i18n
yarn add vue-il8n

目前通过npm install vue-il8n下载的il8n版本是无法支持vue3.0，因此要使用npm install vue-i18n@next 来获取最新的版本,v9.x
npm install vue-i18n@next

使用时，一定不要重复安装，或者安装最新版本后，用旧版本的方法调用，也会报错

2. 项目中使用

在main.js里面配置

import VueI18n from 'vue-i18n';
Vue.use(VueI18n);// 引入各个语言配置文件
import zh from './lang/zh';
import en from './lang/en';
// 创建vue-i18n实例i18n
const i18n = new VueI18n({
// 设置默认语言
  locale: localStorage.getItem('locale') || 'zh', //语言标识
  messages: {
    zh,
    en
  },
  fallbackLocale: 'zh', //在首选语言缺少翻译时选择要使用的语言。
  formatFallbackMessages: true //如果在message中找不到相应的键值将回退到原本的语言
})

//将il8n 注入到vue实例中
new Vue({
  el: '#app',
  i18n,
  render: h => h(App)
});

vue模板文件中使用:通过{{ $t(‘’) }}方法引用文案
JS中使用：this.$t(‘’)
this.$i18n.locale = 'en' ,可以切换现在的使用的语言项

3.一些用法

如果有插入动态改变的文字之类的话，可以使用这种方法v9版本之前的用法

new Vue({
  i18n: new VueI18n({
    locale: 'en',
    messages: {
      en: { hello: 'hi {name}!' },
      ja: { hello: 'こんにちは、{name}！' }
    }
  }),
  computed: {
    nickName () { return 'kazupon' }
  },
  data: { path: 'hello' }
}).$mount('#object-syntax')

Templates:

<div id="object-syntax">
  <!-- literal -->
  <p v-t="{ path: 'hello', locale: 'ja', args: { name: 'kazupon' } }"></p>
  <!-- data binding via data -->
  <p v-t="{ path: path, args: { name: nickName } }"></p>
</div>
or
<div id="object-syntax">
  <p>{{$t('hello', { name: nickName })}}</p>
</div>

Outputs:

<div id="object-syntax">
  <p>こんにちは、kazupon！</p>
  <p>hi kazupon!</p>
</div>