0

Используя документацию Per-component translations я добавляю переводы в компонент. Это работает отлично.

<i18n>
{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "こんにちは、世界!"
  }
}
</i18n>

<template>
  <p>{{ $t('hello') }}</p>
</template>

Затем я хочу вынести перевод в отдельный файл locales.json

{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "こんにちは、世界!"
  }
}

Возникает проблема с подключением этого файла.

<i18n :src="'~/locales/locales.json'"></i18n>

<template>
  <p>{{ $t('hello') }}</p>
</template>

Сам файл подключен, но не обрабатывается NUXT, а выдает ошибку, в чём может быть проблема:

Syntax Error: Unexpected end of JSON input friendly-errors 14:58:46
at JSON.parse ()

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

/locales
       /en
         about.json
         main.json
         howto.json
       /ja
         about.json
         main.json
         howto.json

и в дальнейшем предполагал подставлять локаль в путь

<i18n :src="'~/locales/<HERE_ACTIVE_LOCALE>/about.json'"></i18n>
2
  • This is a Russian-speaking community. Questions are published here in Russian. Translate your question or go to the English version of the site 15 сен 2021 в 13:57
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 15 сен 2021 в 13:57

1 ответ 1

0

Я остановился на таком решении, если кому-то тоже потребуется разделять на отдельные файлы (мне надо хранить переводы именно в отдельных файлах, а не внутри компонентов vue)

Более развернуто: мне необходимо было подключить файлы переводов, таким образом, чтобы они были распределены по отдельным файлам соответствующим страницам либо элементам интерфейса, чтобы у меня была возможность работать с каждым файлом отдельно, вот так:

/locales
       /en
         foo.json
         bar.json
       /ja
         foo.json
         bar.json

Я не нашёл способа сделать это с помощью json файлов, что было бы удобно переводчикам, как я понимаю, но по крайней мере это сработало, если хранить переводы в js файлах, вот так:

/locales
       /en
         foo.js
         bar.js
       /ja
         foo.js
         bar.js

Но в применив решение Atefeh Atashi я столкнулся с проблемой следующего характера: в файле index.js предлагается экспортировать таким образом, но это не сработает, т.к. это будет два объекта:

const foo = require('./foo')
const bar = require('./bar')

module.exports = {
    foo,
    bar
}

Стоит их объединить:

const foo = require('./foo')
const bar = require('./bar')

module.exports = Object.assign(
    foo,
    bar
)

И тогда окончательный вариант выглядит так, для тех, кому надо разделить переводы на файлы:

  1. Создаем директорию locales, в ней поддиректории с языками
/locales
       /en
         index.js
         foo.js
         bar.js
       /ja
         index.js
         foo.js
         bar.js
  1. Добавляем в nuxt.config.js следующие строки (привожу только необходимые):
modules: [
        [
            '@nuxtjs/i18n',
            {
                vueI18nLoader: true,
                locales: [
                    {
                        code: 'en',
                        file: 'en',
                    },
                    {
                        code: 'ja',
                        file: 'ja',
                    },
                ],
                lazy: true,
                langDir: 'locales/',
            }
        ]
]
  1. В каждом index.js подключаем отдельные файлы (это будет дублирующийся код, но пока не придумал как его вынести в одно место):
const foo = require('./foo')
const bar = require('./bar')

module.exports = Object.assign(
    foo,
    bar
)
  1. В каждом отдельном файле (тут это foo.js, bar.js) экспортируем переводы:
// ja foo.js
module.exports = {
    "Hello": "こんにちは"
}

// en foo.js
module.exports = {
    "Hello": "Hello"
}

// ja bar.js
module.exports = {
    "About": "について"
}

// en bar.js
module.exports = {
    "About": "About"
}
1
  • В текущем виде ваш ответ непонятен. Пожалуйста, нажмите править под сообщением, чтобы добавить больше подробностей, которые помогут другим понять, как он отвечает на заданный вопрос. Вы можете найти больше информации о том, как писать хорошие ответы в справке. 15 сен 2021 в 15:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.