如何在Nuxt中结合i18n为各可用语言创建动态跳转链接

你现有代码的问题如下：

• 从process.env读取的所有值默认都是字符串类型，不能直接用Array.from处理，需要先调用split(',')拆分为数组
• forEach方法没有返回值，你给ABOUT字段赋值的结果会是undefined
• 此处的this指向不符合预期，无法用来挂载动态属性

具体实现步骤 #

你现有的.env配置不需要修改：

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

修改nuxt.config.js的代码即可：

// nuxt.config.js 顶部先预处理环境变量
const availableLocales = process.env.AVAILABLE_LOCALE.split(',')
const aboutNames = process.env.ABOUT_NAME.split(',')

// 动态拼接多语言about配置对象
const aboutConfig = availableLocales.reduce((result, locale, index) => {
  result[locale] = aboutNames[index]
  return result
}, {})

export default defineNuxtConfig({
  // 你的其他nuxt配置项
  publicRuntimeConfig: {
    ABOUT: aboutConfig
  }
})

注意事项 #

• 请保证AVAILABLE_LOCALE和ABOUT_NAME的逗号分隔项数量完全一致，避免出现下标错位导致名称不匹配的问题
• 如果是Nuxt2项目，把defineNuxtConfig去掉，直接export default { 配置项 }即可

内容的提问来源于stack exchange，提问作者Jeffrey van Zwam