Vue3: le plugin i18n ne trouvera pas la localisation dans le fichier json

Question

Je suis en train de configurer une application vue3 avec une localisation i18n. La localisation est censée être située dans des fichiers json. J'ai ajouté i18n via vue add i18n à mon projet. Les questions posées lors de l'installation ont toutes été répondues avec la valeur par défaut sauf celle concernant le support hérité (ma réponse : non). Quand j'essaie d'utiliser un texte provenant d'un fichier json, il me dit dans la console [intlify] Clé 'message' non trouvée dans les messages de locale 'en'. Les traductions locales fonctionnent parfaitement. Et je n'ai aucune idée pourquoi cela ne fonctionne pas avec les traductions fournies dans le fichier JSON.

Voici mon code :

packages.json

{
  "name": "optinity-frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\""
  },
  // ... autres dépendances
}

i18n.ts

import { createI18n, LocaleMessages, VueMessageType } from 'vue-i18n'

/**
 * Charger les messages de la locale
 * 
 * Les messages de localisation `JSON` chargés sont pré-compilés par `@intlify/vue-i18n-loader`, qui est intégré dans `vue-cli-plugin-i18n`.
 * Voir : https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation
 */
function loadLocaleMessages(): LocaleMessages {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages: LocaleMessages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key)
    }
  })
  return messages
}

export default createI18n({
  legacy: false,
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages()
})

main.ts

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import i18n from './i18n'

const app = createApp(App).use(i18n).use(store).use(router)
app.mount('#app');

vue.config.js

module.exports = {
  // ... vos autres options
  transpileDependencies: [
    'vuex-module-decorators'
  ],

  pluginOptions: {
    i18n: {
      locale: 'en',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableLegacy: false,
      runtimeOnly: false,
      compositionOnly: false,
      fullInstall: true
    }
  }
}

en.json

{
  "message": "hello i18n !!"
}

et enfin

HelloI18n.vue

import { defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'

export default defineComponent({
  name: 'HelloI18n',
  setup() {
    const { t } = useI18n({
      inheritLocale: true,
      useScope: 'global'
    })

    // Quelque chose à faire ..

    return { t }
  }
})

{
  "en": {
    "hello": "Hello i18n in SFC!"
  }
}

Si je change la portée dans mon fichier HelloI18n.vue en local, je peux utiliser les traductions fournies dans la balise . J'ai déjà ajouté un console log dans mon fichier i18n.ts afin de vérifier si le fichier est trouvé, ce qui est le cas. Je n'ai aucune idée pourquoi cela ne fonctionne pas. Est-ce que quelqu'un a des idées ou peut me diriger dans la bonne direction ?

Answer 1

Le principal problème est que la fonction dans i18n.ts chargeant les messages locaux ne récupère pas correctement les fichiers du dossier locales.

function loadLocaleMessages (): LocaleMessages {
  const locales = require.context(
    './locales',
    true,
    /[A-Za-z0-9-_,\s]+\.json$/i
  )
  const messages: LocaleMessages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key).default
    }
  })
  return messages
}

J'ai ajouté locales(key).default pour obtenir les valeurs extraites des fichiers.