uni-app 国际化不支持 {variable} 风格占位符

uni-app 国际化不支持 {variable} 风格占位符

开发环境与版本信息

属性 值
产品分类 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}

更多关于uni-app 国际化不支持 {variable} 风格占位符的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 国际化不支持 {variable} 风格占位符的实战教程也可以访问 https://www.itying.com/category-93-b0.html


需补充平台分类（安卓/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 版本、设备型号等，信息完整，有助于我们定位问题。

  1. 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 端都正常显示插值后的文本。

回到顶部