UI 本地化

2020-03-13 15:26 更新

標(biāo)準(zhǔn) UI

請(qǐng)遵循下列簡(jiǎn)單步驟來(lái)為 CLI UI 提交一種其它語(yǔ)言的翻譯!

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

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

作為示例,參考一份法語(yǔ)的包。

翻譯插件

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

示例 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'
})

危險(xiǎn)

請(qǐng)確定為 id 設(shè)置正確的命名空間,因?yàn)樗枰缢胁寮3治ㄒ?。我們推薦使用反向域名記號(hào) (reverse domain name notation)。

在組件中使用的示例:

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

如果你愿意的話(huà),可以使用 ClientAddonApi 在一個(gè)客戶(hù)端 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))
})


以上內(nèi)容是否對(duì)您有幫助:
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)