如何在 nuxt 中为每种可用语言创建动态链接？

Question

对于我的项目，我将 Nuxt 与 i18n 结合使用。在 .env 文件中，我创建了一个包含所有可用语言的数组。现在 nuxt.config 我想为每种可用语言配置关于菜单。关于应该是一个对象，包含语言环境和菜单名称，所以即：

about: {
  "nl-NL": process.env.ABOUT_NAME[0],
  en: process.env.ABOUT_NAME[1]
}

我不希望对可用语言进行硬编码，它们应该是动态的。因此，对于 AVAILABLE_LOCALE.split(",") 中的每种语言，将属性添加到 about 对象。

我怎样才能做到这一点？现在我有这个代码：

nuxt.config.js

publicRuntimeConfig: {
  ABOUT: Array.from(process.env.ABOUT_NAME).forEach(lang => {
    this.language = lang;
  }),
}

.env

AVAILABLE_LOCALE='nl-NL,en,es'
ABOUT_NAME='Over ons,About us,Sobre nosotros'

Answer 1

已修复！这是对我有用的结果：

    PAGE: {
      NAME: JSON.parse(
        JSON.stringify(
          process.env.PAGE_NAME.split(",")
            .map(function(translation) {
              const index = process.env.PAGE_NAME.split(",").indexOf(
                translation
              );
              let newObject = {};
              newObject.id = index;
              newObject.language = process.env.AVAILABLE_LOCALE.split(",")[
                index
              ];
              newObject.name = translation;
              return newObject;
            })
            .reduce((acc, obj) => {
              let { name, language } = obj;
              return { ...acc, [language.toUpperCase()]: name };
            }, {})
        )
      ),
      URL: JSON.parse(
        JSON.stringify(
          process.env.PAGE_NAME.split(",")
            .map(function(translation) {
              const index = process.env.PAGE_NAME.split(",").indexOf(
                translation
              );
              let newObject = {};
              newObject.id = index;
              newObject.language = process.env.AVAILABLE_LOCALE.split(",")[
                index
              ];
              newObject.name = translation;
              return newObject;
            })
            .reduce((acc, obj) => {
              let { name, language } = obj;
              return {
                ...acc,
                [language.toUpperCase()]: name
                  .replace(/\s+/g, "-")
                  .toLowerCase()
              };
            }, {})
        )
      )
    },

如何在 nuxt 中为每种可用语言创建动态链接？

How to create dynamic links in nuxt for each available language?

javascript

nuxt.js

nuxt-i18n