vue-i18n

---

---

vue-i18n-loader

---

---

• 檔案支援什麼類型?
• 檔案如何儲存?

---

檔案支援什麼類型?

• json
• yaml

---

檔案如何儲存?

---

Inline (whole)

// a.vue

<i18n>
{
  "en-us": {
    "hello": "hello"
  },
  "zh-cn": {
    "hello": "哈囉"
  }
}
</i18n>

---

Inline (partial)

// b.vue

<i18n locale="en-us">
{
  "hello": "hello"
}
</i18n>

<i18n locale="zh-cn">
{
  "hello": "哈囉"
}
</i18n>

---

Import

// a.vue

<i18n src="src/locale/index.json">
</i18n>

// index.json
{
  "en-us": {
    "hello": "hello"
  },
  "zh-cn": {
    "hello": "哈囉"
  }
}

---

---

vue-i18n

---

---

• 暴露的方法
  • $t - 文字
  • $t - 文字: 帶參數
  • $tc - 文字: 區分方式 單數、複數
  • $tc - 文字: 區分方式 沒有、一個、多個
  • $n - 數字
  • $d - 日期
  • Linked messages - 不同 message 間的調用
  • Modifiers - 用以更改調用的 message
  • $i18n - 用以更改要使用的地區等等
• 更改語言
• 難點

---

暴露的方法

以下排版皆是:

// component.vue

// message.js

---

$t - 文字

this.$t('fruits.apple')

// => An apple

export default {
  fruits: {
    apple: "An apple."
  }
}

---

$t - 文字 帶參數

this.$t('fruits.apple', { adjective: "fresh" } )

// => A(n) fresh apple.

export default {
  fruits: {
    apple: "A(n) {adjective} apple."
  }
}

---

$tc - 文字 區分方式 單數、複數

this.$tc('fruits.apple', 1)

// => 倖存的蘋果

export default {
  fruits: {
    apple: "倖存的蘋果 | {n}個蘋果",
    apple: "倖存的蘋果 | {count}個蘋果
  }
}

---

$tc - 文字 區分方式 沒有、一個、多個

this.$tc('fruits.apple', 0)

// => 一個都不留

export default {
  fruits: {
    apple: "一個都不留 | 倖存的蘋果 | {n}個蘋果",
    apple: "一個都不留 | 倖存的蘋果 | {count}個蘋果"
  }
}

---

$n - 數字

this.$n(123.456789, 'amount')

// => 123.46

export default {
  amount: {
    maximumFractionDigits: 2
  }
}

---

$d - 日期

參考 $n - 數字

---

Linked messages - 不同 message 間的調用

this.$t('fruits.apple')

// => 多個蘋果

export default {
  "fruits": {
    "apple": "一個都不留 | 倖存的蘋果 | @:count.many個蘋果",
    "apple": "一個都不留 | 倖存的蘋果 | @:(count.many)個蘋果"
  },
  "count": {
    "many": "多個",
  }
}

---

Modifiers - 用以更改調用的 message

this.$t('sentence')

// => A HUGE apple.

export default {
  sentense: 'A @.upper:huge apple.',
  adjectives: {
    huge: 'huge'
  }
}

---

$i18n - 用以更改要使用的地區等等

this.$i18n.locale = 'en'

---

Methods

• this.$t(path, options)
• this.$tc(path, count)
• this.$te(path) -> boolean
• this.$n(number, path)
• this.$d(number | Date, path)

---

• {n}
• {count}
• (zero | )single | plural
• @:(path)

---

缺點

• 無法使用 option 解析 path
• 呼叫方式(nested)不一致、不直覺，學習成本高

---

實例

https://codesandbox.io/s/vue-i18n-7l44f