Как перевести веб-сайт Vue.js: Vue I18n или No-Code

Два способа перевода веб-сайта Vue.js: Vue I18n с помощью Composition API или слой перевода без кода, добавленный в index.html. Код настройки, компромиссы и заметки по SEO.
Начать
Отправьтесь на экскурсию
Нет данных карты Никаких обязательств

· Обновлено · Алекс Б · Блог

Подведите итог этому посту следующим образом: 8 мин чтения
ChatGPT ЧатGPT Perplexity Недоумение Grok Грок Google AI Google ИИ

Существует два способа перевода веб-сайта Vue.js. Маршрут разработчика — Vue I18n: вы перемещаете каждый фрагмент текста в файлы перевода, ссылаетесь на него с помощью $t('key') или useI18n()и предоставьте файл для каждого языка. Маршрут без кода — это уровень перевода веб-сайта: вы добавляете один скрипт к своему index.html, и он переводит визуализированную страницу, включая контент, который появляется после навигации, не изменяя ваши компоненты. Vue I18n имеет смысл, когда ваша команда владеет всем текстом и хочет, чтобы он был в кодовой базе. Уровень перевода работает быстрее, когда вам нужен весь сайт на многих языках, включая контент из CMS или API.

Ключевые выводы

  • Vue I18n — стандартная библиотека интернационализации для Vue. Вы создаете i18n экземпляр с createI18n, зарегистрируйте его с помощью app.use(i18n), и визуализировать текст с помощью $t() в шаблонах или t() от useI18n().
  • Его устаревший API устарел в Vue I18n v11 и планируется удалить в v12, поэтому новые проекты должны использовать Composition API.
  • Вам все еще нужно обрабатывать переведенные URL-адреса, hreflang, <html lang>, и перевод текста, которого нет в вашем коде (контент CMS, данные о продукте).
  • Уровень перевода, такой как ConveyThis, не требует изменений кода: добавьте сценарий, выберите языки и отредактируйте переводы в визуальном редакторе.
  • При любом методе рендеринг только на стороне клиента является слабым местом для SEO. Используйте Nuxt или предварительный рендеринг, если важен поисковый трафик на других языках.

Вариант 1: Перевод приложения Vue с помощью Vue I18n

Vue I18n — плагин интернационализации, поддерживаемый командой Intlify. Минимальная настройка Composition API занимает четыре шага.

1. Установить

npm install vue-i18n

2. Создайте экземпляр i18n со своими сообщениями

// src/i18n.js
import { createI18n } from 'vue-i18n';

const messages = {
  en: {
    nav: { home: 'Home', pricing: 'Pricing' },
    hero: { title: 'Translate your store in minutes' },
  },
  fr: {
    nav: { home: 'Accueil', pricing: 'Tarifs' },
    hero: { title: 'Traduisez votre boutique en quelques minutes' },
  },
};

export const i18n = createI18n({
  legacy: false, // use the Composition API
  locale: 'en', // active language
  fallbackLocale: 'en', // used when a key is missing
  messages,
});

3. Регистрация это с вашим приложением

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import { i18n } from './i18n';

createApp(App).use(i18n).mount('#app');

4. Используйте его в компонентах

<script setup>
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
</script>

<template>
  <h1>{{ t('hero.title') }}</h1>
  <select v-model="locale">
    <option value="en">English</option>
    <option value="fr">Français</option>
  </select>
</template>

В документации Vue I18n описаны ключевые варианты: locale устанавливает активный язык, fallbackLocale используется, когда ключ перевода отсутствует, и messages содержит переводы по регионам. Также отмечается, что Legacy API “устарел Vue I18n v11, и Vue I18n v12 удален”, поэтому предпочтительнее legacy: false и useI18n() в новом коде.

Чего Vue I18n вам не делает

Vue I18n переводит строки, которые вы ему даете. Многоязычному веб-сайту нужно нечто большее:

  • Кто-то должен писать каждую строку на каждом языке и синхронизировать их по мере изменения приложения. Отсутствующие ключи возвращаются на английский язык без какого-либо предупреждения.
  • Сообщения в блогах, описания продуктов и все, что получено из CMS или API, отсутствуют в ваших файлах сообщений. Для них вам понадобится отдельный процесс локализации.
  • Языковые URL-адреса зависят от вас. Добавьте локаль к своим маршрутам (/fr/pricing) с маршрутизатором Vue и сохраните маршрутизатор и locale синхронно. Google рекомендует использовать отдельный URL-адрес для каждого языка, а не переключаться с помощью cookie-файлов или настроек браузера (Центр поиска Google).
  • То же самое касается тегов hreflang и <html lang>. Каждая языковая версия должна перечислять себя и все остальные (Центр поиска Google). Обновлять document.documentElement.lang когда меняется локаль.
  • Для цен и дат используйте форматирование номеров и дат Vue I18n (встроенное в браузер Intl API), а не форматировать их вручную.
  • Если вы поддерживаете много языков, загружайте сообщения каждой локали по требованию, а не объединяйте их все.

Практические советы

  • Сохраняйте семантику ключей (checkout.payButton), а не на основе предложений, поэтому изменения копирования не ломают ключи.
  • Не объединяйте строки (t('hello') + name); использовать интерполяцию (t('hello', { name })) чтобы переводчики могли изменить порядок слов.
  • Используйте функции плюрализации вместо if (count === 1); во многих языках существует более двух форм множественного числа.
  • Оставьте место в макете для более длинного текста; немецкий и французский языки часто длиннее английского.
  • Если вам нужен арабский или иврит, заранее протестируйте языки справа налево.

Вариант 2: Перевести сайт Vue без кода, с ConveyThis

Если вы не хотите перемещать каждую строку в файлы или большая часть вашего контента поступает из CMS или API, уровень перевода поможет вам сделать это быстрее. ConveyThis переводит то, что ваше приложение Vue отображает в браузере.

Настройка занимает около 10 минут:

  1. Создать учетную запись ConveyThis и добавьте свой домен.
  2. Выберите исходный язык и целевые языки (поддерживается 210).
  3. Скопируйте фрагмент JavaScript с панели управления (см JavaScript руководство по интеграции).
  4. Вставьте его в точку входа HTML вашего приложения перед закрытием </head> или </body> ярлык. В проекте Vite это index.html в корне проекта; в проекте Vue CLI это public/index.html.
  5. Развертывать. Появится переключатель языка, и ваш контент будет переведен автоматически.

В одностраничном приложении скрипт ConveyThis отслеживает страницу на предмет контента, который добавляется или изменяется после загрузки, и отслеживает изменения маршрута на стороне клиента (навигация API истории и изменения хэша). Когда маршрутизатор Vue переходит в новое представление или компонент отображает новый текст, этот текст подхватывается и переводится. Вам не нужно ничего вызывать из ваших компонентов.

Вы сохраняете контроль над выводом:

  • Редактируйте любой перевод в контексте с помощью визуального редактора.
  • Установите правила глоссария для названий и терминов продуктов (платные планы) и повторно используйте утвержденные переводы с памятью переводов.
  • Исключите элементы, которые не должны быть переведены путем добавления conveythis-no-translate класс (как исключить сегменты), например имена пользователей или фрагменты кода.
  • Пригласите рецензентов с командными ролями.

SEO для сайтов Vue

Приложение Vue, созданное исключительно на основе клиента, поставляет почти пустую HTML-оболочку и создает страницу в браузере. Какой бы метод вы ни выбрали, это вредит многоязычному SEO, поскольку переведенный контент отсутствует в исходном HTML. Если поисковый трафик на других языках имеет значение:

  • Используйте Nuxt (серверный рендеринг или статическую генерацию) или этап предварительного рендеринга, чтобы содержимое каждой страницы существовало в формате HTML.
  • Дайте каждому языку свой URL-адрес. ConveyThis поддерживает подпапки, поддомены или a ?lang параметр, автоматически добавляет теги hreflang и преобразует заголовки страниц, метаописания и JSON-LD. Видеть многоязычное SEO о том, как работают режимы URL.
  • Проверьте переведенные страницы с помощью функции проверки URL-адресов Google Search Console, чтобы узнать, что на самом деле отображает Google.

Vue I18n против слоя трансляции

Vue I18nConveyThis
Изменения кодаКаждая строка перемещена в файлы сообщенийОдин тег скрипта
Кто переводитВаша команда или переводчики, в файлахПервый черновик машинного перевода, отредактированный в визуальном редакторе
Содержимое CMS / APIНужен отдельный процессПереведено со страницы
Новый контентНеобходимо добавить в каждый файл локалиОбнаружен и переведен автоматически
Языковые URL-адреса и hreflangВы их строитеВстроенный
Лучше всего подходит дляПользовательский интерфейс продукта принадлежит разработчикам, несколько языковМаркетинговые сайты и приложения с большим количеством контента, на многих языках

Многие команды объединяют их: Vue I18n для основного пользовательского интерфейса приложения, где разработчикам нужен полный контроль, и уровень перевода маркетинговых страниц, документов и контента из CMS.

Концепции, лежащие в основе всего этого, читайте в нашем руководство по интернационализации (i18n). Если вы тоже используете React, см как перевести сайт React.

ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ

Как перевести сайт Vue.js?

Либо используйте Vue I18n (перемещайте текст в файлы сообщений на каждом языке и визуализируйте его с помощью $t или useI18n) или добавьте сценарий перевода веб-сайта, например ConveyThis, в index.html, который переводит визуализированную страницу без изменения кода.

Какая библиотека i18n лучше всего подходит для Vue?

Vue I18n — стандартный выбор для Vue 3. Используйте его API композиции (legacy: false), поскольку устаревший API устарел в версии 11.

Работает ли ConveyThis с маршрутизатором Vue?

Да. Скрипт отслеживает изменения маршрута на стороне клиента и отслеживает новый отображаемый контент, поэтому каждое новое представление транслируется, когда пользователи его открывают.

Вредно ли клиентское приложение Vue для многоязычного SEO?

Это сложнее, потому что в исходном HTML-коде нет контента. Для достижения наилучших результатов используйте Nuxt или предварительный рендеринг, отдельные URL-адреса для каждого языка и теги hreflang.

Могу ли я остановить перевод некоторых частей моего приложения Vue?

При ConveyThis добавьте conveythis-no-translate класс для любого элемента. С Vue I18n не передавайте этот текст t().

Чтобы попробовать маршрут без кода на вашем сайте Vue, создать учетную запись ConveyThis и вставьте фрагмент в index.html.

Поделиться:
G2 High Performer Spring 2023
G2 Easiest Setup Fall 2024
G2 Best Support Spring 2025