Vue-i18n调用t(key, 参数数组)时参数插值失效问题排查

核心原因 #

你的问题大概率是Vue I18n的消息格式化器配置导致的。Vue I18n v9+（适配Vue 3）默认使用messageformat作为消息格式化引擎，它对索引式占位符（{0}）的处理逻辑和传统printf风格不同；或者你在配置时未启用对{0}这类索引占位符的支持。

解决方案 #

方案1：切换为printf风格格式化器 #

在创建I18n实例时，显式指定messageFormat: 'printf'，让引擎支持{0}、{1}这类索引式占位符：

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  legacy: false, // 若使用Vue 3组合式API
  locale: 'en',
  messages: {
    en: {
      'my.first.message': 'The planet that you are looking for is unknown',
      'my.second.message': 'The planet {0} that you are looking for is unknown'
    }
  },
  messageFormat: 'printf' // 关键配置：启用printf风格占位符
})

方案2：适配默认messageformat的语法 #

如果不想修改格式化器配置，可以将资源文件中的索引占位符改为{[0]}（messageformat的数组索引语法），同时保持数组参数传递：

# resources.properties
my.first.message=The planet that you are looking for is unknown
my.second.message=The planet {[0]} that you are looking for is unknown

方案3：改用命名式占位符 #

将资源文件和参数都改为命名式，这种方式兼容性更好，也更易读：

1. 修改资源文件：

my.second.message=The planet {planetName} that you are looking for is unknown

2. 修改参数传递逻辑：

// 将数组参数转为对象
content: i18n.global.t(myMessage.message, { planetName: myMessage.args[0] })

快速验证 #

你可以在alert中临时测试命名式参数是否生效：

alert(i18n.global.t('my.second.message', { 0: myMessage.args[0] }))

如果这条alert能正确替换{0}，就说明是格式化器的配置问题，方案1或方案2就能解决。

内容的提问来源于stack exchange，提问作者Diana S