Nuxt i18n翻译中能否保留JSON示例？编译报错求助

错误原因 #

@nuxtjs/i18n 基于 vue-i18n 实现，默认会将文本中的 {} 识别为插值占位符解析。你写入的 {"key": "value"} 被误判为占位符语法，但其中的 "key": 不符合占位符的命名规则（仅支持字母、数字、下划线），因此触发编译错误。

解决方法 #

1. 转义大括号（推荐，适合少量JSON内容） #

vue-i18n 支持用双大括号 {{ 和 }} 转义为单个大括号，避免被当作占位符解析。修改你的翻译配置：

// nuxt-app/i18n.config.ts
export default defineI18nConfig(() => ({
    legacy: false,
    locale: 'en',
    fallbackLocale: "en",
    escapeParameterHtml: false,
    warnHtmlMessage: false,
    messages: {
        en: {
            welcome: "hello dear human {{\"key\": \"value\"}}"
        },
        fr: {
            welcome: "hello dear human fr"
        }
    },
}))

渲染后会正常显示：hello dear human {"key": "value"}。

2. 全局修改插值分隔符（适合大量JSON内容） #

如果翻译中包含大量JSON，转义效率低，可以全局替换vue-i18n的插值分隔符，避免与JSON的大括号冲突：

// nuxt-app/i18n.config.ts
export default defineI18nConfig(() => ({
    legacy: false,
    locale: 'en',
    fallbackLocale: "en",
    escapeParameterHtml: false,
    warnHtmlMessage: false,
    interpolation: {
        prefix: '[[',
        suffix: ']]'
    },
    messages: {
        en: {
            welcome: "hello dear human {\"key\": \"value\"}"
        },
        fr: {
            welcome: "hello dear human fr"
        }
    },
}))

后续需要使用插值占位符时，改用 [[变量名]] 格式即可。

3. 单条翻译使用raw模式（临时方案） #

如果仅需对特定翻译跳过占位符解析，可在调用 $t 时传入 raw: true 参数：

<!-- pages/index.vue -->
<template>
  <div>
    <div>
      <button class="btn ml-3" @click="setLocale('en')">en</button>
      <button class="btn ml-3" @click="setLocale('fr')">fr</button>
      <p>{{ $t('welcome', {}, { raw: true }) }}</p>
    </div>
  </div>
</template>

注意：该方法会使这条翻译中的所有占位符失效，若同时需要正常插值，不建议使用。

内容的提问来源于stack exchange，提问作者Full-Stack Developer