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

【问题标题】：How to create dynamic links in nuxt for each available language?如何在 nuxt 中为每种可用语言创建动态链接？
【发布时间】：2021-12-27 08:59:48
【问题描述】：

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

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'

【问题讨论】：

你想要这样的路由：/:lang/users 和/users（使用默认语言）？
是的，这应该是标记。只是“用户”这个词可能会有所不同，具体取决于语言环境。所以如果英语是默认的：/users || /nl/gebruikers || /es/usarios
你可以使用@nuxtjs/i18n (i18n.nuxtjs.org/routing)
@BTL 我正在使用 i18n，我正在寻找一种方法来重写 url 名称，特定于所选语言。我不希望在 nuxt.config 中硬编码语言和名称。这些设置在 .env

标签： javascript nuxt.js nuxt-i18n

【解决方案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()
              };
            }, {})
        )
      )
    },

【讨论】：