Автор оригинала: Jennifer Bland.

¡Hola! Bonjour. Чао. 你好. Вот как вы добавляете интернационализацию в Vue.

У моей компании есть растения в 37 странах. Мы пишем приложения для сотрудников на этих растениях. Наше приложение должно быть переведено на их родной язык. Вы можете легко добавить интернационализацию в ваше VUE-приложение. Позвольте мне показать вам, как добавить интернационализацию в приложение Vue по умолчанию.

Создание нашего приложения

Мы будем создавать приложение, используя VUE CLI. Если у вас нет установки, вы можете установить его с помощью этой команды:

npm install @vue/cli -g

-G Флаг установит Vue CLI глобально. Теперь, когда у нас есть установка CLI, мы можем создать новое приложение. Введите эту команду, чтобы создать приложение:

vue create vue-internationalization

Vue CLI предложит вам выбрать предустановку. У вас есть возможность выбрать предустановки по умолчанию или выбирать функции вручную. Я выбрал по умолчанию Отказ

Это лежит наситание VUE-приложения в папке под названием Vue-интернационализация Так как это имя, которое мы дали при создании. Теперь измените в этот каталог с этой командой:

cd vue-internationalization

Как только вы находитесь в каталоге, вам нужно будет установить все зависимости с помощью этой команды:

npm install

Чтобы убедиться, что все работает правильно введите эту команду:

npm run serve

Теперь откройте свой браузер для Localhost: 8080, и вы должны увидеть следующее:

Далее мы предоставим международное перевод для этого приложения.

Vue-i18n плагин

Мы будем использовать плагин VUE-I18N для интернационализации. Добавим этот плагин в наше приложение. Если у вас все еще есть свой сервер, остановите его. Затем на терминале введите эту команду:

npm install vue-i18n --save

Поскольку это плагин, я собираюсь настроить его как плагин. Создайте папку под названием плагины В вашей папке SRC. Создайте файл под названием i18n.js Внутри папки плагинов.

Чтобы предоставить интернационализацию, вы должны сказать Vue, чтобы использовать плагин Vue-i18n и предоставить ему объект сообщений. Объект сообщений будет иметь переводы для каждого языка поддержки вашего приложения.

Первый шаг – сказать Vue, чтобы использовать плагин. В i18n.js Файл Введите следующее:

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

Теперь Vue знает, чтобы использовать наш плагин интернационализации. Следующим шагом является создание переводов на каждый язык, который мы поддерживаем. Для демонстрационных целей я собираюсь добавить только два языка: английский и испанский. Как только вы понимаете, как это работает, очень легко продолжать добавлять все больше языков в вашем приложении.

Чтобы добавить языки, которые мы должны создать объект сообщения. Объекты в JavaScript состоят из пар клавишных элементов. Ключи для объектов сообщений будут языками, которые мы поддерживаем. Давайте создадим это с помощью английского и испанского для наших поддерживаемых языков. Добавьте следующий код ниже Vue.use линия в i18n.js файл.

const messages = {
    'en': {},
    'es': {}
};

Далее мы должны создать новый объект интернационализации и сказать Vue для его использования. После того, как объект сообщений добавьте следующий код:

const i18n = new VueI18n({
    locale: 'en', // set locale
    fallbackLocale: 'es', // set fallback locale
    messages, // set locale messages
});

Когда мы создаем наш объект интернационализации, мы должны сообщить об этом языке по умолчанию, которое мы покажем изначально. В случае, если есть проблема, показывающая этот язык, мы можем установить запасную локаль. Затем мы говорим об этом объект сообщений, у которых есть наши переводы. Последняя строка экспортирует этот объект.

Vue нужно сказать, чтобы использовать интернационализацию. Мы делаем это в main.js файл. Откройте main.js файл. Импортируйте наш файл интернационализации с помощью этой команды:

import i18n from '@/plugins/i18n';

Мы должны сказать Vue, чтобы использовать его, поэтому мы добавляем I18n к Vue объекту. Вот что твой main.js Файл должен выглядеть как:

import Vue from 'vue';
import App from './App.vue';
import i18n from '@/plugins/i18n';

Vue.config.productionTip = false;

new Vue({
    i18n,
    render: h => h(App),
}).$mount('#app');

Добавление международных переводов

Откройте i18n.js файл. Мы собираемся создать наш первый перевод. Мы начнем с фразы «Добро пожаловать в приложение Vue.js». Перевод для каждого языка в объекте сообщения является объектом.

Просто напоминание о том, что объект является параметром ключа. Ключ – это то, что мы будем использовать, и ценить – это перевод фразы на этом языке.

Итак, позвольте мне показать вам, как это работает с английским. Обновите файл, чтобы включить следующее:

const messages = {
    'en': {
        welcomeMsg: 'Welcome to Your Vue.js App'
    },
    'es': {}
};

Теперь мы должны предоставить испанский перевод для этой фразы. Поскольку я не говорю по-испански свободно, я собираюсь использовать Google Translate.

Я скопирую испанский перевод, который обеспечивает Google Translate. Тогда я добавлю его в испанский раздел. Каждый язык должен использовать один и тот же ключ. Итак, наш обновленный объект сообщений выглядит так:

const messages = {
    'en': {
        welcomeMsg: 'Welcome to Your Vue.js App'
    },
    'es': {
        welcomeMsg: 'Bienvenido a tu aplicación Vue.js'
    }
};

Теперь, когда у нас есть этот перевод, нам нужно заменить английский текст в нашем приложении по умолчанию, чтобы использовать наш текст интернационализации. Откройте App.vue файл. В шаблоне это передает опоры Msg к компоненту Helloworld. Мы хотим заменить этот текст нашим международным текстом. Для простоты я собираюсь удалить эту опору и поместить текст в компоненте HellowOrld.

Открыть HellowOrld составная часть. В H1 Тег, отображается опора MSG. Давайте заменим его следующим кодом:

{{ $t('welcomeMsg') }}

$ T указывает, что мы используем плагин интернационализации. Текст, который мы хотим отображаться, – это значение ключа WelComEmsg в нашем объекте сообщений. Если у вас остановлен свой сервер, вы можете начать его с этой командой:

npm run serve

Затем перейдите в свой браузер, и вы увидите отображаемый международный текст.

Изменяющие языки

Мы хотим иметь возможность увидеть текстовое изменение на испанский, если мы установим наш локальный быть испанским. Вопрос в том, как мы это делаем? Самый простой способ – обеспечить раскрывающееся падение, которое показывает флаги стран, языковая поддержка которых предоставляется в приложении. Пользователи могут выбрать их язык, который приводит к тому, что во всех языках изображен текст на этом языке. Таким образом, нам нужен способ разрешить пользователям поменять языки.

Чтобы отобразить флаги в раскрывающемся положении, мы могли бы использовать .png Графический файл. Это явно будет работать. Позвольте мне показать вам лучший путь. Vue-flag-icon Пакет предоставляет коллекцию всех странных флагов в SVG. Давайте установим его с помощью этой команды:

npm install vue-flag-icon --save

Теперь, когда у нас он установил, что мы должны сказать Vue, чтобы использовать его. Откройте файл main.js. Мы должны импортировать пакет, который мы только что установили и сообщили, чтобы использовать его. Ваш файл Main.js должен выглядеть так:

import Vue from 'vue';
import App from './App.vue';
import i18n from '@/plugins/i18n';
import FlagIcon from 'vue-flag-icon';

Vue.use(FlagIcon);
Vue.config.productionTip = false;

new Vue({
    i18n,
    render: h => h(App),
}).$mount('#app');

Далее нам нужно создать кнопки для пользователя, чтобы выбрать их язык. Откройте App.vue составная часть. Мы собираемся показать кнопку для обоих языков. Пользователь может нажать на кнопку, чтобы показать текст на их языке.

В этой демонстрации я только поддерживаю два языка. В приложении Real-World вы, вероятно, будете поддерживать еще много языков. В этом случае у вас будет массив всех поддерживаемых языков. Давайте сделаем это сейчас в нашем приложении, чтобы вы могли видеть, насколько легко перенести на более крупное приложение.

Нам нужно добавить данные в наш скрипт. У нас будет запись под названием Языки который будет массивом объектов. Объект будет содержать флаг, язык и название. Это то, что данные должны выглядеть как:

data() {
    return {
        languages: [
            { flag: 'us', language: 'en', title: 'English' },
            { flag: 'es', language: 'es', title: 'Español' }
        ]
    };
}

В нашем шаблоне нам нужно создать кнопку для каждого языка в нашем Языки множество. Мы будем использовать V-для Директива по цирке по всему записи и создайте кнопку для каждого. Вот код, который вы должны добавить к шаблону перед IMG Отказ

    
         {{entry.title}}
    

В коде выше мы петлю через все записи в Языки множество. Внутри кнопки мы отображаем флаг страны и название. Когда вы запускаете это изначально, мы получаем стиль по умолчанию для кнопки, предоставленной вашим браузером. Давайте стиль кнопки, поэтому добавьте следующие CSS в разделе «СТИЛЬ»:

button {
    padding: 15px;
    border: 1px solid green;
    font-size: 18px;
    margin: 15px;
}

Я предоставляю прокладку вокруг текста и надевая зеленую границу вокруг кнопки. Размер шрифта делает текст читаемый на экране. Маржа – это просто для установки пространства между двумя кнопками, а также некоторое пространство между кнопками и изображением.

Когда мы создали кнопку, мы сказали ей, чтобы вызвать метод Changelocale Если пользователь нажимает кнопку. Этот метод изменит локаль на язык на кнопке пользовательских кликов. Чтобы изменить локаль, нам сначала нужно импортировать наш плагин I18N. Вы можете импортировать его с помощью этой команды:

import i18n from '@/plugins/i18n';

Теперь мы можем создать наши Changelocale метод. Вот что похоже:

methods: {
    changeLocale(locale) {
        i18n.locale = locale;
    }
}

Начните свой сервер. Вы увидите две кнопки. Нажмите на испанскую кнопку. Приветственное сообщение должно мгновенно изменяться на испанский.

Отделка переводов

До сих пор мы только перевели один элемент на экран. Мы можем повторить то, что мы сделали для оставшегося текста на странице. Откройте i18n.js файл. Вот мои переводы для заголовков раздела на странице.

const messages = {
    'en': {
        welcomeMsg: 'Welcome to Your Vue.js App',
        guide: 'For a guide and recipes on how to configure / customize this project,',
        checkout: 'check out the',
        plugins: 'Installed CLI Plugins',
        links: 'Essential Links',
        ecosystem: 'Ecosystem'
    },
    'es': {
        welcomeMsg: 'Bienvenido a tu aplicación Vue.js',
        guide: 'Para una guía y recetas sobre cómo configurar / personalizar este proyecto,',
        checkout: 'revisar la',
        plugins: 'Plugins de CLI instalados',
        links: 'Enlaces esenciales',
        ecosystem: 'Ecosistema'
    }
};

Теперь нам нужно обновить компонент HellowOrld с этими переводами. Вот переведенный шаблон:

Запустите свой сервер и просмотрите приложение в браузере. Нажмите между двумя кнопками. Вы увидите текст автоматически перевести на язык, который вы нажали. Посмотрите этот GIF.

Получить код

У меня есть готовый код Доступно на GitHub Отказ Пожалуйста, помогите мне и звезда репо Когда вы получите код.

Заключение

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

Я надеюсь, что вы наслаждались этой статьей. Спасибо за прочтение!