Динамический перевод с использованием vue-i18n (VueJS)

Привет! Если вы используете пакет vue-i18n, чтобы позволить вашему приложению включить настройку международного языка, я покажу вам, как сделать vue-i18n для динамического перевода текста.

Https://github.com/kazupon/vue-i18n

Установка

Следуйте официальному руководству по установке и…

npm install vue-i18n --save

Проектная среда

Вы можете использовать предыдущие статьи - Часть 1, Часть 2, Часть 3 для создания многоразовой и масштабируемой структуры с использованием vue-cli с vuejs, если у вас нет существующего проекта vuejs.

Ознакомьтесь с исходным кодом с Github!

Разогреть

Перед пуском дайте старту разогреться, чтобы использовать vue-i18n в основном. Предположим, вы уже интегрировали vue-i18n в приложение.

В файле локали json

// en_US.json
{
    "notice": {
        "msg": "You have message"
    }
}

// zh_CN.json
{
    "notice": {
        "msg": "你有短讯"
    }
}

В файле компонента (.vue)

// HTML Part
<h2>{{ $t('lang.notice.msg') }}</h2> // OR
<div v-bind:title="$t('lang.notice.msg')"></div>
// JS Part
import i18n from '../locale/config'
i18n.t('lang.notice.msg')

Динамический перевод со специальным форматированием

Что ж ... Я думаю, у вас уже есть предварительное представление об использовании vue-i18n. Попробуем makeDynamic Translate.

В vue-i18n он может предоставлять Name Formatting и List Formatting.

Предположим, что сценарий показывает разные Text в одном сообщении динамически из возвращаемого значения бизнес-логики.

Например:

// Dynamic Text
// [alert], [remind], [error]
1. You have alert message. // If return id is 0
2. You have remind message. // If return id is 1
3. You have error message. // If return id is 2

Шаг 1

Определите Dynamic Text of Return ID в файле json локали

// en_US.json
{
    "notice": {
        "msg": "You have {noticeType} message"
    },
    "type": [
        "text": "alert",
        "text": "remind",
        "text": "error"
    ]
}
// zh_CN.json
{
    "notice": {
        "msg": "你有{noticeType}短讯"
    },
    "type": [
        "text": "警报",
        "text": "提醒",
        "text": "错误"
    ]
}

Шаг 2

Вернуться к компоненту (.vue)

// In JS Part
data() {
    // From business logic to get notice type id
    // 0 = alert, 1 = remind, 2 = error
    let num = 2
    return {
        noticeTypeText: num
    }
}

// In HTML DOM Part
$t('lang.notice', {
    'noticeType': $t(`lang.type[${noticeTypeText}].text`)
})

Финал

В среде en_US,

Если num = 0, отображается сообщение You have alert message.

Если num = 1, отображается сообщение You have remind message.

Если num = 2, отображается сообщение You have error message.

В среде zh_CN

Если num = 0, отображается сообщение 你有警报短讯.

Если num = 1, отображается сообщение 你有提醒短讯.

Если num = 2, отображается сообщение 你有错误短讯.

Расширенное исследование

Источник проекта (Git)

Https://github.com/dc198689/pear

Динамический перевод с использованием vue-i18n (VueJS)

Https://medium.com/@t198689/dynamic-translate-using-vue-i18n-vuejs-c730093a63e2

Многоразовый, масштабируемый и простой в организации проект с использованием VueJS (часть 1)

Https://medium.com/hong-kong-tech/reusable-scalable-and-easy-to-organize-project-using-vuejs-part-1-d08fa83b8581

Многоразовый, масштабируемый и простой в организации проект с использованием VueJS (часть 2)

Https://medium.com/hong-kong-tech/reusable-scalable-and-easy-to-organize-project-using-vuejs-part-2-c7e82044d7fc

Многоразовый, масштабируемый и простой в организации проект с использованием VueJS (часть 3)

Https://medium.com/hong-kong-tech/reusable-scalable-and-easy-to-organize-project-using-vuejs-part-3-ed8cba6b4dfe

Чтобы продолжить…

Динамический перевод с использованием vue-i18n (VueJS)