mirror of
https://github.com/vuejs/vue-cli.git
synced 2026-04-29 16:30:33 -05:00
Alexander Sokolov
61 lines
3.6 KiB
Markdown
61 lines
3.6 KiB
Markdown
# Локализация в UI
|
||
|
||
## Локализация стандартного UI
|
||
|
||
Выполните следующие шаги, для добавления нового перевода в CLI UI!
|
||
|
||
1. Выполните `navigator.languages` или `navigator.language`, чтобы получить код текущего языка для новой локализации. *Например: `'fr'`.*
|
||
|
||
2. Поищите в NPM не существует ли уже пакета с именем `vue-cli-locale-<код языка>`. Если существует, пожалуйста отправляйте в него пулл-реквестаы для изменений! Если вы ничего не нашли, создайте новый пакет с именем `vue-cli-locale-<код языка>`. *Например: `vue-cli-locale-fr`*
|
||
|
||
3. Поместите JSON-файл локализации в каталог `locales` и установите ему в качестве имени языковой код. *Например: `locales/fr.json`*
|
||
|
||
4. В файле `package.json` установите полю `unpkg` значение пути до файла локализации. *Например: `"unpkg": "./locales/fr.json"`*
|
||
|
||
5. Опубликуйте пакет в NPM.
|
||
|
||
Английская локализация для отправной точки находится [здесь](https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-ui/locales/en.json).
|
||
|
||
Взгляните в качестве примера на [пакет французской локализации](https://github.com/Akryum/vue-cli-locale-fr).
|
||
|
||
## Локализация вашего плагина
|
||
|
||
Вы можете поместить файлы локализаций, совместимые с [vue-i18n](https://github.com/kazupon/vue-i18n) в каталог `locales` в корне вашего плагина. Они будут автоматически загружены в клиент при открытии проекта. Вы можете использовать `$t` для перевода строк в ваших компонентах и другие возможности vue-i18n. Также, любые строки используемые в UI API (такие как `describeTask`) будут также обрабатываться vue-i18n, поэтому вы сможете локализовать и их.
|
||
|
||
Пример каталога `locales`:
|
||
|
||
```
|
||
vue-cli-plugin/locales/en.json
|
||
vue-cli-plugin/locales/fr.json
|
||
```
|
||
|
||
Пример использования в API:
|
||
|
||
```js
|
||
api.describeConfig({
|
||
// путь vue-i18n
|
||
description: 'com.my-name.my-plugin.config.foo'
|
||
})
|
||
```
|
||
|
||
::: danger Убедитесь!
|
||
В правильно указанном пространстве имён; оно должно быть уникальным для всех плагинов. Рекомендуется применять [нотацию перевёрнутого доменного имени](https://en.wikipedia.org/wiki/Reverse_domain_name_notation).
|
||
:::
|
||
|
||
Пример использования в компонентах:
|
||
|
||
```html
|
||
<VueButton>{{ $t('com.my-name.my-plugin.actions.bar') }}</VueButton>
|
||
```
|
||
|
||
Вы также можете загружать переводы в клиентском расширении, с помощью `ClientAddonApi`:
|
||
|
||
```js
|
||
// Загрузка файлов локализации (используется 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))
|
||
})
|
||
```
|