Vue多语言切换-i18n使用

多语言切换

    vue使用中经常设计到多语言切换。

    官方文档比较通俗，1小时看完就会上手，我简单记录下自己在使用犯蠢的错误。

官网地址：http://kazupon.github.io/vue-i18n/zh/api/#

1. $tc , $t , $te , v-t

1.$tc 用于复数，例如英文一般分单复数

这里的复数，指的是同一个字段，可能根据单复数不同可以有多个值对关系；

const messages = {
  en: {
    apple: 'no apples | one apple | {count} apples',
    banana: 'no bananas | {n} banana | {n} bananas'
  }
}
<p>{{ $tc('car', 1) }}</p>
<p>{{ $tc('car', 2) }}</p>

2.$t 使用在一般场景，替换值为单个元素的

注意：$tc可以用于复数和非复数情况，$t只能用于非复数情况

3.$te 返回的是boolean值，判断key是否存在。

4.v-t 指令形式的表达

• 两种形式：1.字符串形式传递。总之需要传递的值是字符串，在“”双引号中，单引号''包裹的字符串；2.对象的方式，具体可以看官网示例

 <!-- 字符串 -->
  <p v-t="'hello'"></p>
  <!-- 通过数据进行键名路径绑定 -->
  <p v-t="path"></p> 

 i18n: new VueI18n({
    locale: 'en',
    messages: {
      en: { hello: 'hi there!' }
    }
  }),
  data: { path: 'hello' }

• v-t 和 $t()进行比较

  • v-t 性能更好，但是使用更复杂，需要设置自定义指令到 createRenderer 函数的 directives 选项

  • $t() 更灵活，但是每次重新渲染时都会被执行，影响性能。

存在问题

问题1.Cannot translate the value of keypath 'home.totalAssets'

无法成功展示，切换

很多人说是下面的这个配置：

silentFallbackWarn:true,//避免退到 fallbackLocale 产生警告

然鹅，我犯得比较低级的错误，我把定义i18n中的messages,写成了message。粗心造成的问题，害我找了半天。