UI 本地化

標準 UI

請遵循下列簡單步驟來為 CLI UI 提交一種其它語言的翻譯！

1. 運行 navigator.languages 或 navigator.language 為新的地區(qū)獲取語言代碼。例如：'fr'。
2. 搜索 npm 確認名為 vue-cli-locale-<language code> 的包是否已經(jīng)存在。如果存在，則請通過 PR 為它貢獻！如果沒找到，則創(chuàng)建一個新的名為 vue-cli-locale-<language code> 的地區(qū)的包。例如：vue-cli-locale-fr.
3. 將地區(qū)的 JSON 文件放置在一個 locales 文件夾并將這個文件命名為語言代碼。例如：locales/fr.json。
4. 在 package.json 文件中，設(shè)置 unpkg 字段為地區(qū)文件的路徑。例如："unpkg": "./locales/fr.json"。
5. 將包發(fā)布到 npm 上。

可以參考這里的英文地區(qū)文件。

作為示例，參考一份法語的包。

翻譯插件

你也可以在插件的根目錄的 locales 文件夾放置與 vue-i18n 兼容的地區(qū)文件。這樣做會在項目打開的時候自動加載，然后你可以使用 $t 在你的組件和 vue-i18n 輔助函數(shù)里翻譯字符串。同樣的 UI API (像 describeTask) 用到的字符串將會進入 vue-i18n，這樣你就可以對它們做本地化。

示例 locales 文件夾：

vue-cli-plugin/locales/en.json
vue-cli-plugin/locales/fr.json

API 的用法示例：

api.describeConfig({
  // vue-i18n 路徑
  description: 'com.my-name.my-plugin.config.foo'
})

危險

請確定為 id 設(shè)置正確的命名空間，因為它需要跨所有插件保持唯一。我們推薦使用反向域名記號 (reverse domain name notation)。

在組件中使用的示例：

<VueButton>{{ $t('com.my-name.my-plugin.actions.bar') }}</VueButton>

如果你愿意的話，可以使用 ClientAddonApi 在一個客戶端 addon 加載地區(qū)文件：

// 加載本地文件 (使用 vue-i18n)
const locales = require.context('./locales', true, /[a-z0-9]+\.json$/i)
locales.keys().forEach(key => {
  const locale = key.match(/([a-z0-9]+)\./i)[1]
  ClientAddonApi.addLocalization(locale, locales(key))
})