Как правильно подключить json файл с переводом для NUXT i18n Per-component translations?

Question

Используя документацию 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>

Answer 1

Я остановился на таком решении, если кому-то тоже потребуется разделять на отдельные файлы (мне надо хранить переводы именно в отдельных файлах, а не внутри компонентов 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
)

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

Создаем директорию locales, в ней поддиректории с языками

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

Добавляем в nuxt.config.js следующие строки (привожу только необходимые):

modules: [
        [
            '@nuxtjs/i18n',
            {
                vueI18nLoader: true,
                locales: [
                    {
                        code: 'en',
                        file: 'en',
                    },
                    {
                        code: 'ja',
                        file: 'ja',
                    },
                ],
                lazy: true,
                langDir: 'locales/',
            }
        ]
]

В каждом index.js подключаем отдельные файлы (это будет дублирующийся код, но пока не придумал как его вынести в одно место):

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

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

В каждом отдельном файле (тут это 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"
}

БЛОГ НА HUSL

Как правильно подключить json файл с переводом для NUXT i18n Per-component translations?

Ответы (1 шт):