NUXT I18N：如何避免重复的翻译键

Question

我正在使用nuxt，nuxt i18n和组件翻译：

<template>
  <div>{{ $t("Hello world") }}</div>
</template>

<i18n lang="yaml">
fr:
  Hello world: Bonjour le monde
</i18n>

我的问题是，该代码在英语中“不起作用”和显示“ bonjour le monde”，因为我希望以英语找到翻译，而我希望它留下来”世界”。为了使它起作用，我必须将其重新重新列出：

<template>
  <div>{{ $t("Hello world") }}</div>
</template>

<i18n lang="yaml">
fr:
  Hello world: Bonjour le monde
en:
  Hello world: Hello world
</i18n>

因此，仅翻译我的文本1次似乎太多了。

我很好地看了一下文档，但也许我缺少一些东西:(这是我的I18N配置：

modules: [
  '@nuxtjs/i18n',
  ...
],
i18n: {
  vueI18nLoader: true,
  langDir: 'locales/',
  lazy: true,
  loadLanguagesAsync: true,
  locales: [
    {
      code: "en",
      name: "English",
      iso: 'en-US',
      file: 'en.js'
    },
    {
      code: "fr",
      name: "Français",
      iso: 'fr-FR',
      file: 'fr.js'
    },
  ],
  defaultLocale: "en",
  strategy: 'prefix',
  parsePages: false
}

Answer 1

如果您将其与＆lt; i18n＆gt;标签一起使用，则看起来很麻烦。

同时，这是通常的方法关于如何在一个较大的项目中使用I18N。

几乎如所示在这里，您也将在此处使用以下以下内容。您的代码

<div id="app">
  <p>{{ $t("message.hello") }}</p>
</div>

在您的项目中有一些fr.json和en.json een.json 。

然后，它可以像自动化（如果需要）之间的合并一样简单。

---

这是有关如何与JSON

NUXT.CONFIG.JS

modules: [
  '@nuxtjs/i18n',
],
i18n: {
  defaultLocale: 'en',
  langDir: 'locales/',
  lazy: true,
  loadLanguagesAsync: true,
  locales: [
    {
      code: "en",
      iso: 'en',
      file: 'en.json'
    },
    {
      code: "fr",
      iso: 'fr',
      file: 'fr.json'
    },
  ],
  vueI18n: {
    fallbackLocale: 'en',
  }
},

/locales/fr.json

{
  "helloWorld": "Salut le monde"
}

/locales/en.json <

{
  "helloWorld": "hello world"
}

< < < 代码>/pages/index.vue

<template>
  <div>
    <nuxt-link :to="switchLocalePath('en')">Change to English</nuxt-link>
    <nuxt-link :to="switchLocalePath('fr')">Passer en Francais</nuxt-link>
    <p>here is the i18n string {{ $t('helloWorld') }}</p>
  </div>
</template>

带有实际结果

单击每个链接将正确更改有关JSON文件中的语言环境。

---

这是 github repo 如果您想要一个工作示例。