每次查看一个翻译文件

Question

我使用 vue.js（版本 2），并且每个 vue 文件中都有一个翻译块，如下所示：

abc.vue

<i18n>   
{
    "fr": {
        "settings": "Conf"
    },
    "en": {
        "settings": "Configuration"
    }
} 
</i18n>
    
<template>
.... {{ $t('settings') }} ...
</template>

i18n.js

function loadLocaleMessages () {
  const locales = require.context(
    '../locales',
    true,
    /[A-Za-z0-9-_,\s]+\.json$/i
  )
  const messages = {}
  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
}

所以，它可以工作，但我想每个 vue 文件都有一个翻译文件。

我想要 :

在“fr”目录中：

abc.json

{ “设置”：“会议” }

在“en”目录中：

abc.json

{ “设置”：“配置” }

我该怎么做？

非常感谢。

Answer 1

因此，您可以通过以下步骤来实现：-

1. 为每种语言创建目录，放置每个vue组件对应的翻译文件。

2. 修改 i18n.js 如下

   import Vue from "vue";
   
   
   import VueI18n from "vue-i18n";
   
   Vue.use(VueI18n);
   
   function loadLocaleMessages() {
     const messages = {
       en: {
         abc: require("./assets/locales/en/abc.json"),
         xyz: require("./assets/locales/en/xyz.json"),
         // Add other components as needed
       },
       fr: {
         abc: require("./assets/locales/fr/abc.json"),
         xyz: require("./assets/locales/fr/xyz.json"),
         // Add other components as needed
       },
       // Add other locales as needed
     };
   
     return messages;
   }
   
   function createI18n() {
     const messages = loadLocaleMessages();
     return new VueI18n({
       locale: "fr", // set locale
       fallbackLocale: "fr", // set fallback locale
       messages, // set locale messages
     });
   }
   

   导出默认createI18n；

3. 更新main.js如下

   import Vue from "vue";
   import App from "./App.vue";
   import createI18n from "./i18n";
   
   const i18n = createI18n();
   
   new Vue({
     i18n,
     render: (h) => h(App),
   }).$mount("#app");
   

通过执行上述步骤，您可以实现这一目标。 这里是相同的代码沙箱。