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。粗心造成的問題，害我找了半天。