Вы когда-нибудь задумывались о создании многоязычного веб-сайта? Здесь я хочу поговорить о страницах, созданных с помощью Nuxt JS на разных языках. Чтобы справиться с этой темой в проектах Nuxt, есть 3 следующих способа:

Создайте новый проект Nuxt:

Сначала мы создаем наш проект Nuxt с помощью команды npx create-nuxt-app ‹project-name›.

Установить модуль Nuxt-i18n

Чтобы установить пакет nuxt-i18n, мы используем одну из следующих двух команд: 1-Используйте эту команду, если вы работаете с Yarn:

yarn add nuxt-i18n

2-В противном случае, если вы работаете с npm, используйте команду ниже:

npm i nuxt-i18n --save

Основное использование:

Почему мы используем этот метод?

Мы используем этот метод, когда у нас есть несколько переводов. Более того, этот метод более быстрый.

Как мы его используем?

После установки пакета мы можем настроить его на основе следующих параметров в файле nuxt-config.js.

{
  modules: [
    'nuxt-i18n'
  ],
i18n: {
    locales: ['en', 'fa'],
    defaultLocale: 'en',
    vueI18n: {
      fallbackLocale: 'en',
      messages: {
        en: {
          welcome: 'Welcome'
        },
        fa: {
          welcome: 'خوش آمدید'
        }
      }
    }
  }
}

После добавления параметров в файл nuxt-config.js мы используем функцию $ t () для доступа к упомянутым переводам в компонентах out.

<template>
  <h1>{{ $t('welcome') }}</h1>
</template>

Локали с отложенной загрузкой:

Почему мы используем этот метод?

Вместо использования вышеупомянутого метода мы помещаем большое количество переводов в разные файлы, чтобы систематизировать, классифицировать и контролировать их.

Как мы его используем?

Параметры настройки. Чтобы настроить наш пакет, мы добавляем «nuxt-i18n» в раздел модулей, как упоминалось выше. Есть также два способа добавить параметры i18n:

  1. В массив modules вставьте массив, включающий ‘nuxt-i18n’ и объект, содержащий параметры.
modules: [
  ['nuxt-i18n', {
    locales: [
     {
        name: 'English',
        code: 'en',
        iso: 'en',
        file: 'en'
      },
      {
        name: 'Farsi',
        code: 'fa',
        iso: 'fa',
        file: 'fa'
      },
    ],
    langDir: 'locales/',
    defaultLocale: 'en',
  }]
]
  1. Просто поместите модуль 'nuxt-i18n' в раздел modules файла nuxt.config.js и поместите объект 'i18n' в отдельная строка.
modules: [
'nuxt-i18n'
],
  i18n: {
    lazy: true,
    langDir: 'locales/',
    locales: [
       {
        name: 'English',
        code: 'en',
        iso: 'en',
        file: 'en'
      },
      {
        name: 'Farsi',
        code: 'fa',
        iso: 'fa',
        file: 'fa'
      },
   ],
    defaultLocale: 'en',
  },

Я рекомендую вам использовать второй метод, потому что он чище и удобнее для чтения.

В разделе ‘i18n’ у нас есть ряд опций, а именно:

1- Locales: массив, содержащий объект поддерживаемых языков. Например, здесь вы видите 2 объекта, содержащих поддерживаемые нами языки. Для каждого языка мы вводим имя, код, iso и имя файла, которое наши переводы содержать.

2- langDir: мы помещаем сюда имя папки, которая содержит все файлы перевода.

3- defaultLocale: здесь мы определяем язык по умолчанию.

4- ленивый: при загрузке Lazy каждый язык загружается в свое время (всякий раз, когда этот язык требуется). Устанавливаем значение true или false.

Затем мы создаем папки и связанные файлы. Сначала создайте папку в корневом разделе под названием locales. Во-вторых, создайте папки в соответствии с определенными языками. Здесь мы определяем два языка en и fa в папке locales.

В каждую из папок en и fa мы можем добавить столько файлов, сколько захотим. Теперь вы можете использовать переводы в своем приложении по умолчанию с помощью этой функции, $ t (‘’).

Мы создаем файл general.js и вставляем в него экспорт по умолчанию для нашего перевода, но он не работает, когда мы пытаемся его использовать.

Я провел много поисков и, наконец, с помощью моего друга пришел к решению, что лучше всего поместить каждый созданный нами файл в файл index.js для идентификации и вместо использования экспорта по умолчанию мы должны использовать module.exports, как показано ниже.

Я думаю, что это ошибка, и у меня с ней проблема. Тем не менее, я надеюсь, что для этого можно найти лучшее решение, но это решение ( использование module.exports с файлом index.js ) может помочь ты прямо сейчас.

Используя vue-i81n:

Почему мы используем этот метод?

Мы используем его, потому что хотим получить доступ к vue-i81n.

Как мы его используем?

Мы указываем просто vueI18nLoader в параметрах i18n.

  modules: [
    'nuxt-i18n'
   ],
  i18n: {
    vueI18nLoader: true
  },

Затем мы помещаем i18n tag в сам компонент, и туда же помещаются значения перевода, а в самом коде мы используем функцию $ t () для доступа к значению перевода.

<i18n>
{
  "en": {
    "hello": "hello world!"
  },
  "fa": {
    "hello": "سلام دنیا!"
  }
}
</i18n>
<template>
  <p>{{ $t('hello') }}</p>
</template>

Каждый из этих методов используется с учетом типа проекта и его размера.

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

1- Определение сообщений внутри nuxt.config (базовое использование): [https://i18n.nuxtjs.org/basic-usage]

2. Загрузка Lazy для представления каталога локалей (Lazy Loading Locales) [https://i18n.nuxtjs.org/setup/]

3- Вставка vue-i18n-loader (Использование vue-i81n) [https://i18n.nuxtjs.org/vue-i18n-loader]

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