Как использовать nuxt i18n?

Question

Я пытаюсь использовать nuxti18n, хотя есть несколько примеров, но ни один из них не работает. Я смог изменить язык, но не смог перевести.

Документы: https://nuxt-community.github.io/nuxt-i18n/

Все, что прокомментировано Это то, что уже попробовал

Компоненты / Header.vue

<nuxt-link :to="switchLocalePath('pt')">pt</nuxt-link>
<nuxt-link :to="switchLocalePath('en')">en</nuxt-link>
<nuxt-link :to="switchLocalePath('de')">de</nuxt-link>
<nuxt-link :to="switchLocalePath('fr')">fr</nuxt-link>

nuxt.config.js

modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
      '@nuxtjs/auth',
    'bootstrap-vue/nuxt',
    ['nuxt-i18n', {
      locales: [
        //{ code: 'en', iso: 'en-US', langFile: 'en.json' },
        //{ code: 'en', iso: 'en-US', langFile: '~/locales/en.json' },
        //{ code: 'en', iso: 'en-US', langFile: './locales/en.json' },
        //{ code: 'en', iso: 'en-US', langFile: '../locales/en.json' },
        { code: 'en', iso: 'en-US', langFile: 'en.json' },
        { code: 'pt', iso: 'pt-PT', file: 'pt.json' },
        { code: 'de', iso: 'de-DE', file: 'de.json' },
        { code: 'fr', iso: 'ft-FR', langFile: 'fr.json' }
      ],
      langDir: 'locales/' //with and without
      /*vueI18n: {
        fallbackLocale: 'pt',
         messages: {
            //en: require('./locales/en.json'),
            //en: require('en.json'),
            //en: require('locales/en.json'),
            //en: require('./locales/en.json'),
            //en: require('~/locales/en.json'),
            //en: require('../locales/en.json'),
            en: require('~/locales/en.json'),
            fr: require('~/locales/fr.json'),
            de: require('~/locales/de.json'),
            pt: require('~/locales/pt.json')
         }*/
    }]

  ],

/locales/en.json

{
  "crm": {
    "entidades":{
      "editarEntidade":{

      }

    },
    "pesquisa": "Search",
    "pesquisar": "Search...",
    "sim": "Yes",
    "nao": "No",
    "nomeUtilizador": "User name",
    "nome": "Name",
    "email": "Email",
    "admin": "Admin",
    "acoes": "Actions",
    "porPagina": "Per Page",
    "confirmarEliminar": "Do you want to delete the user ",
    "cancelar":"Cancel",
    "confirmar": "Confirm"
  },
  "pt": "Portuguese",
  "en": "English",
  "fr": "French",
  "de": "Germam"
}

предупреждение консоли (их много)

...
[vue-i18n] Cannot translate the value of keypath 'crm.pesquisa'. Use the value of keypath as default.
...

{{$ t ('crm.cancelar')}} я ожидаю Отмена, но показывает crm.cancelar

Спасибо за помощь этому новичку:)

Answer 1

Это работает сейчас, но не знаю почему, я удалил комментарии, добавил имя в локали и добавил lazy: true

Спасибо всем

Answer 2

Официальный Док говорит:

• file (требуется при использовании <tcode id="17149948"></tcode>) - имя файла. Будет разрешено относительно langDir путь при ленивой загрузке сообщений локали

Answer 3

Самый простой способ - создать каталог "locales" на том же уровне, что и assets, nuxt.config.js, pages и т. д.

затем импортируйте библиотеку в модули

      modules: [
   ///...

   'nuxt-i18n',
],

тогда лучше установите мой ключ как

      modules: [...],
i18n: {
    locales: [...],
    defaultLocale: 'en',
},

после этого добавьте несколько полей, как в этом примере:

      i18n: {
        locales: ['en', 'ru'], // list of langs
        defaultLocale: process.env.VUE_APP_I18N_LOCALE || 'en', // just for better experience
        langDir: '~/locales/', // here is languages directory
        locales: [ 
// here is files information ( if you have .json format, replace .js with .json
                { code: 'ru', iso: 'ru-RU', file: 'ru.js', },
                { code: 'en', iso: 'en-EN', file: 'en.js', },
            ],
            vueI18n: {
                fallbackLocale: process.env.VUE_APP_I18N_LOCALE || 'en',         
            }
        },