Вы когда-нибудь задумывались о создании многоязычного веб-сайта? Здесь я хочу поговорить о страницах, созданных с помощью 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:
- В массив 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', }] ]
- Просто поместите модуль '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]
Я надеюсь, что этот текст окажется для вас полезным, и если вы найдете лучшее решение, дайте мне знать.