eoc

发布：2026-06-22 11:36
更新：2026-06-22 11:36
阅读：42

【报Bug】国际化不支持 {variable} 风格占位符

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： windows 11

HBuilderX类型：正式

HBuilderX版本号： 5.07

手机系统： Android

手机系统版本号： Android 16

手机厂商：小米

手机机型：小米13

页面类型： vue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

操作步骤：

import { useI18n } from 'vue-i18n'  
const { t } = useI18n()  
const text = t('summary', {  
  total: 100,  
  user: 20,  
  order: 30,  
  other: 50  
})

语言json

{  
  "summary": "共 {total} 项 · 用户 {user} / 订单 {order} / 其他 {other}"  
}

预期结果：

输出：

共 100 项 · 用户 20 / 订单 30 / 其他 50

实际结果：

输出：

共 {total} 项 · 用户 {user} / 订单 {order} / 其他 {other}

bug描述：

目前 Vue I18n 的消息格式不支持以下占位符写法：

共 {total} 项 · 用户 {user} / 订单 {order} / 其他 {other}

2026-06-22 11:36 负责人:无分享

1 个回复

Ask小助手 - Ask社区AI助手

需补充平台分类（安卓/iOS/鸿蒙/小程序）。建议提供HBuilderX版本及manifest.json中safearea配置代码，以便精准定位暗黑模式底部闪白问题。
欢迎到专业群（ uni-app 官方技术交流群 1 ）咨询，群中有相关专业的管理员和群友。

好的，收到你的 bug 反馈。作为 DCloud 官方人员，我对这个反馈进行如下评审：

1. 反馈内容完整性分析

这份 bug 反馈整体质量较高，关键信息基本齐全，值得肯定。

BUG 标题：清晰明确，直接点出了核心问题“不支持 {variable} 风格占位符”。
BUG 描述：问题描述简洁，直接给出了期望的写法，对比效果明显。
代码示例：提供的 t('summary', { ... }) 调用方式和语言 JSON 文件内容都是完整且可运行的，无需额外补充，官方人员可以直接照此复现。
复现步骤：步骤清晰，结合代码示例，在 Vue3 项目中使用 vue-i18n 即可复现，没有歧义。
预期结果：非常合理，这正是 vue-i18n 命名插值（named interpolation）的标准用法和预期表现。
实际结果：{total} 等占位符没有被替换，直接输出了原文，这确实是一个不正常的表现，属于有效的 bug 现象。
分类信息：提供了操作系统、HBuilderX 版本、运行平台、Vue 版本、设备型号等，信息完整，有助于我们定位问题。

2. BUG 是否成立分析

结论：Bug 成立，但这是一个已知的平台限制，而非未知的缺陷。

根据知识库中的官方文档，在 uni-app 中，Vue3 项目迁移到小程序和 App 端时，确实不支持 {variable} 风格的插值方式定义国际化。

知识库原文：migration-to-vue3 > 小程序和App端不支持插值方式定义国际化@vue-i18n 明确指出：
“因运行平台限制，目前在小程序和 App 端不支持插值方式定义国际化,需要使用 Messages Functions 定义国际化信息”。

同时，在 ask 社区中也有大量用户反馈了相同的问题，例如 vue3项目中使用i18n国际化字符串占位符不生效，这进一步证实了该问题在 App 端（Android/iOS）确实存在，而 H5 端是正常的。

因此，你反馈的现象是真实的，但它源于 uni-app 在非 Web 平台（App、小程序）上对 vue-i18n 编译和运行时的限制，并非一个突然出现的 bug。

3. 替代方案推荐

官方文档已经给出了明确的替代方案，即使用 Messages Functions 语法来替代命名插值。

你可以将你的语言 JSON 文件修改为函数形式：

// 语言文件，例如 en.json  
const messages = {  
  en: {  
    summary: ({ named }) => `共 ${named('total')} 项 · 用户 ${named('user')} / 订单 ${named('order')} / 其他 ${named('other')}`  
  }  
}

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

在页面中的调用方式保持不变：

<template>  
  <view>{{ $t('summary', { total: 100, user: 20, order: 30, other: 50 }) }}</view>  
</template>

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

这样修改后，即可在 App、小程序和 H5 端都正常显示插值后的文本。

内容为 AI 生成，仅供参考

要回复问题请先登录或注册

【报Bug】国际化不支持 {variable} 风格占位符

操作步骤：

`import { useI18n } from 'vue-i18n' const { t } = useI18n() const text = t('summary', { total: 100, user: 20, order: 30, other: 50 })`

语言json

`{ "summary": "共 {total} 项 · 用户 {user} / 订单 {order} / 其他 {other}" }`

预期结果：

输出：

`共 100 项 · 用户 20 / 订单 30 / 其他 50`

实际结果：

输出：

`共 {total} 项 · 用户 {user} / 订单 {order} / 其他 {other}`

bug描述：

1 个回复

公告

相关问题

【报Bug】国际化不支持 {variable} 风格占位符

操作步骤： import { useI18n } from 'vue-i18n' const { t } = useI18n() const text = t('summary', { total: 100, user: 20, order: 30, other: 50 }) 语言json { "summary": "共 {total} 项 · 用户 {user} / 订单 {order} / 其他 {other}" }

预期结果： 输出： 共 100 项 · 用户 20 / 订单 30 / 其他 50

实际结果： 输出： 共 {total} 项 · 用户 {user} / 订单 {order} / 其他 {other}

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

操作步骤：

`import { useI18n } from 'vue-i18n' const { t } = useI18n() const text = t('summary', { total: 100, user: 20, order: 30, other: 50 })`

语言json

`{ "summary": "共 {total} 项 · 用户 {user} / 订单 {order} / 其他 {other}" }`

预期结果：

输出：

`共 100 项 · 用户 20 / 订单 30 / 其他 50`

实际结果：

输出：

`共 {total} 项 · 用户 {user} / 订单 {order} / 其他 {other}`